@juuz0u

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

Пытался работать через контекст, но не получается. У меня есть недоделанный проект https://github.com/m3tmrphss/example в нём в папке src/components/main/main-components есть две папки backlog и ready, в каждом из них по одному react компоненту. Пока что сделал два взаимодействующих между собой списка, то есть в backlog я добавляю задачу сам, а в ready я добавляю задачу из backlog, при этом из backlog должна удаляться задача, но ошибка в том, что задача из backlog не удаляется самостоятельно, она лишь удаляется, когда я нажимаю на кнопку добавить задачу в backlog списке. Кто-нибудь мог бы подсказать что я делаю не так ?
  • Вопрос задан
  • 164 просмотра
Решения вопроса 1
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) // обновляем состояние
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы