手动改变 React 的状态，然后调用 setState答案

【问题标题】：Mutating state on React manually, then calling setState手动改变 React 的状态，然后调用 setState
【发布时间】：2017-11-18 02:39:50
【问题描述】：

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

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

正如 React 文档所说，我们不应该手动更改 state，而应该调用 setState，因此，我在控制台上收到警告说，即使在手动更改后调用 setState。

我这样做是因为，对我来说，这样做比分离 task、在我的数组上执行 splice 并使用新值调用 setState 更实际。

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

【问题讨论】：

The React docs outline why this is a bad idea: "永远不要直接修改 this.state，因为之后调用 setState() 可能会替换你所做的修改"。换句话说，如果您直接改变状态，则无法保证您的更改实际上会持续存在。
因为我来自 Vue，所以这不是我关心的问题。谢谢！
是的，Vue 通常在设计时似乎考虑到了变异（这就是为什么很多人喜欢它而不是 React，即使这不是我个人的偏好）。你必须在 React 中使用 setState 的原因是它允许优化 - 例如如果您连续两次快速调用setState，它们可能会合并为一次执行的批量更新。再次引用文档：“将setState 视为更新组件的请求，而不是立即命令。”
太棒了。我首先采用了 Vue，因为它非常适合我正在开发的一些应用程序。我现在选择学习 React 以将其与 React Native 应用程序一起使用并且由于市场份额，尽管我仍然更喜欢 Vue。

标签： javascript reactjs

【解决方案1】：

试试这个：

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

【讨论】：

简单易懂。

【解决方案2】：

您不应该直接改变状态，这样做会从状态创建一个新对象，然后更新它并将其设置回状态

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

如果您想知道{...this.state.tasks} 做了什么，请查看以下答案：

What is the meaning of this syntax "{...x}" in Reactjs

但是，您也可以使用 ES5 Object.assign() 运算符复制状态

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

【讨论】：