• Как в reactjs удалять компонент из массива так, чтобы перерисовывался компонент?

    alsolovyev
    @alsolovyev
    ¯\_(ツ)_/¯ Enjoy life, Eat well & Laugh often
    1. Зачем вам нужен тут Context? Добавьте useState со списком задач в main компонент и передавайте их в дочерние компоненты:
    export function MainNode() {
        const [tasks, setTasks] = useState(predefinedTasks)
    
        const addTask = (listName, task) => {
           // ..
           // setTasks 
           // ..
        }
    
        const removeTask = (listNaem, taskId) => {
            // ...
            // setTasks
            // ..
        }
    
        
        const moveTask = (fromListName, toListName, taskId) => {
            // ..
            // setTasks
            // ..
         }
    
        return (
            <main>
                <TasksContainer type="Backlog" tasks={tasks.backlog} addTask={addTask}/>
                <TasksContainer type="Ready" ... />
                <TasksContainer type="InProgress" ... />
                <TasksContainer type="Finished" ... /> 
            </main>
        )
    }


    2. Если вам необходимо по каким-то причинам использовать context, то по аналогии с примером выше:
    export const TaskContext = createContext();
    
    export const TaskProvider = ({ children }) => {
        const [tasks, setTasks] = useState(predefinedTasks)
    
        const addTask = (listName, task) => {
           // ..
           // setTasks 
           // ..
        }
    
        const removeTask = (listNaem, taskId) => {
            // ...
            // setTasks
            // ..
        }
    
        
        const moveTask = (fromListName, toListName, taskId) => {
            // ..
            // setTasks
            // ..
         }
    
        return (
            <TaskContext.Provider value={{ tasks, moveTask, addTask }}>
                {children}
            </TaskContext.Provider>
        );
    }


    После чего используйте:
    const TaskList = ({ listName }) => {
        const { tasks, moveTask, addTask } = useContext(TaskContext);
        // ....
    }


    Вам надо почитать как работает реактивность в React и разобраться почему изменения в объекте не триггерят рирендер компонента. Если по простому, то Вам нужно не просто добавлять (push) новый task в список, а полностью заменять весь объект (data) с тасками и не использовать для каждого компонента свой useState
    // так не работет
    tasks.backlog.push(...) 
    
    // так работает
    const tasks = {....} // объект с задачами 
    const updatedTasks = { // создаем новый объект с задачами
          ...tasks,
          [listName]: [...tasks[listName], newTask]
     };
    setTasks(updatedTasks) // обновляем состояние
    Ответ написан
    1 комментарий