使用 prevState 更改对象数组中的值不会返回预期值答案

【问题标题】：Use of prevState to change value in array of objects does not return expected value使用 prevState 更改对象数组中的值不会返回预期值
【发布时间】：2021-01-15 21:44:05
【问题描述】：

我正在使用以下方法尝试将task.isComplete的值更改为!task.isComplete onClick。

handleComplete = (event) => {
  event.preventDefault();
  this.setState(
    (prevState) => ({
      listOfTasks: prevState.listOfTasks.map((task) => {
        if (task.id === event.target.id) {
          task.isComplete = !task.isComplete;
          console.log(task);
        }
        return task;
      }),
    }),
    () => console.log(this.state.listOfTasks)
  );
};

单击按钮时，2 个日志是：

{nameOfTask: "aaaa", isComplete: true, id: "1610746018062"}

TodoListTest.js:54 
[{…}]
0: {nameOfTask: "aaaa", isComplete: false, id: "1610746018062"}
length: 1
__proto__: Array(0)

React 似乎只考虑第二个日志状态，所以我没有得到预期的变化，在操作结束时不完整地变为 true。

【问题讨论】：

标签： reactjs asynchronous state

【解决方案1】：

您需要制作task 对象的浅表副本以更新其isComplete 属性。

  handleComplete = (event) => {
    event.preventDefault();

    this.setState(
      (prevState) => ({
        listOfTasks: prevState.listOfTasks.map((task) => {
          if (task.id === event.target.id) {
            return {
              ...task,
              isComplete: !task.isComplete
            };
          }
          return task;
        })
      }),
      () => console.log(this.state.listOfTasks)
    );
  };

【讨论】：