react中的可变状态更新

Posted 2021-04-10

例如，我们有一个这样定义的状态，它有一些待办事项，如果要完成，我们想更改该待办事项的完成状态

this.state = {
  // store an array of todo objects
  todos: [
    { task: 'do the dishes', done: false, id: 1 },
    { task: 'vacuum the floor', done: true, id: 2 }
  ]
};

为此，我们可以取消此操作。

  const theTodo = this.state.todos.find(t => t.id === id);
  theTodo.done = true; // NOOOOO

  this.setState({
    todos: this.state.todos
  });

}

但是我有点困惑，数组上的find方法将向我们返回与其内部条件匹配的元素，然后将其存储在另一个变量中，然后进行访问以将其更改为true。但是，我们仍然没有更改原始状态值，因为这是一个副本。

然后我们怎么可以使用它来保存它？

 this.setState({
    todos: this.state.todos // bad
  });

答案

仅spread一切

另一答案

您实际上没有更改任何值。您需要创建一个待修改的待办事项数组，并选择要完成的一组任务，然后以此来设置整个批次的状态。我建议这样使用.map()：