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

Question

[juuz0u]

Пытался работать через контекст, но не получается. У меня есть недоделанный проект https://github.com/m3tmrphss/example в нём в папке src/components/main/main-components есть две папки backlog и ready, в каждом из них по одному react компоненту. Пока что сделал два взаимодействующих между собой списка, то есть в backlog я добавляю задачу сам, а в ready я добавляю задачу из backlog, при этом из backlog должна удаляться задача, но ошибка в том, что задача из backlog не удаляется самостоятельно, она лишь удаляется, когда я нажимаю на кнопку добавить задачу в backlog списке. Кто-нибудь мог бы подсказать что я делаю не так ?

Comments

[Rerurk]

Может вам стоит в сторону redux покопать?

[WbICHA]

Пожалуйста, запустите проект у себя через npm run start и увидите интерфейс

А может всё же ты зальёшь своё решение в песочницу и дашь ссылку?)

[WbICHA]

Собственно, полностью ожидаемо ты мутируешь объект, причём объект контекста. А реакт, о чём говорить буквально везде, не отслеживает мутации, а только обновления значений.
Добавь функцию для апдейта контекста иммутабельно.

[juuz0u]

WbICHA, https://codesandbox.io/p/github/m3tmrphss/example/...

Answer 1

[Aleksey Solovyev]

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>
            <BacklogTasksContainer tasks={tasks.backlog} addTask={addTask}/>
            <ReadyTasksContainer ... />
            <InProgressTasksContainer ... />
            <FinishedTasksContainer ... /> 
        </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) // обновляем состояние

Comments

[juuz0u]

спасибо большое