以不可变的方式改变 React 状态

Question

我有一个状态，它由 Exam 对象数组组成，它的一个参数 (tasks) 也是对象数组。我需要更改一个对象 (exam[=18] 中参数数组 (tasks) 的一项的参数 (status) =]) 以不可变的方式。非常感谢您的帮助。

const changeTaskStatus = useCallback((id) =>{ setExams(prev => prev.map((exam) =>{ if (exam.tasks.find(task => task.id === id)) { const examCopy = {...exam}; examCopy.tasks.map(task => { if (task.id === id) { const taskCopy = {...task}; task.status = true; return taskCopy } else { return task } }) return examCopy; } else { return exam } })) }, [setExams])

Answer 1

如果您希望更新与某个 ID 匹配的所有任务的状态，那么这里是一个解决方案：

const update = () => {
  const taskIdToUpdate = 2;
  setData(
    data.map((exam) => ({
      ...exam,
      tasks: exam.tasks.map((task) => {
        if (task.taskId === taskIdToUpdate)
          return { ...task, status: !task.status };
        return task;
      })
    }))
  );
};

完整沙盒 - https://codesandbox.io/s/cranky-water-0qhzh0?file=/src/App.js:432-742

以不可变的方式改变 React 状态

Change React state in immutable way

reactjs

immutability

use-state

usecallback