手动修改React上的状态，然后调用setState

Question

我正在学习React JS制作一个简单的待办事项列表，我的部分代码如下：

changeStatus(e, index) {
    this.state.tasks[index].status = e.target.value;
    this.setState((prevState) => ({
        tasks: prevState.tasks
    }));
}

正如React留档所说，我们不应该手动更改state，我们应该调用setState，所以，我在控制台上收到一个警告说，甚至在手动更改后调用setState。

我这样做是因为，对我来说，这样做比分离任务、在我的数组上执行拼接、使用新值调用设置状态更为实际。

我的方法有问题吗？您建议如何以高效且不重复的方式更新状态？

Answer 1

您不应该直接改变状态，要做到这一点，请从该状态创建一个新对象，然后更新该对象并将其设置回类似的状态

changeStatus(e, index) {
    var tasks = {...this.state.tasks}
    tasks[index].status = e.target.value;
    this.setState({tasks});
}

如果您想知道什么是{…this.state.tasks}请检查以下答案：

Reactjs中此语法“{…x}”的含义是什么

但是，您也可以使用ES5Object.assign（）运算符复制状态，如

var tasks = Object.assign({}, this.state.tasks)

Answer 2

试试这个：

   changeStatus(e, index) {
      const tmp = { ...this.state };
      tmp.tasks[index].status = e.target.value;
      this.setState(tmp);
   }