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

Question

我正在使用以下方法尝试将 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。

标签： reactjsasynchronousstate

Answer 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)
    );
  };