在 React 中修改状态答案

【问题标题】：Modifying state in React在 React 中修改状态
【发布时间】：2018-11-27 12:33:44
【问题描述】：

我了解到不建议直接更新状态，例如：

this.state.array = ['element'];

但是，例如，考虑这种状态：

this.state = {
    array: [],
}

updateArray = element => {
    temp = this.state.array;
    temp.push(element);
    this.setState({array: temp});
}

这不是和第一个例子本质上一样吗？我们将 temp 设置为指向 this.state.array，从而对其进行变异，然后用 this.setState() 覆盖它。

我在各种教程中都看到过这个例子，制作数组的副本不是“更好”吗？

【问题讨论】：

可能重复：stackoverflow.com/questions/35867038/… 以及：reactjs.org/docs/state-and-lifecycle.html
在第一个例子中，我猜它不会改变状态，也不会触发重新渲染
你是对的，这不是推荐的方法，而是克隆数组，这样你就可以在克隆的数组上不可变地工作，例如temp = [...this.state.array];
如果问题是关于不变性，那么：this.setState({ array: [ ...this.state.array, element ] }) 可能是最简单、最现代的方法。
或者更好：this.setState( prevState => ( { array: [ ...prevState.array, element ] } ))

【解决方案1】：

在此处查看文档，https://reactjs.org/docs/state-and-lifecycle.html。

根据 React 团队的说法。直接设置状态不会重新渲染组件。您必须使用 setState。

至于在设置状态时使用临时变量，这是在设置状态变量之前需要对“元素”进行某些操作时使用的。因为 setState 可以异步调用。你的情况是可以接受的

updateArray = (element) => {
  this.setState({ array: [ ...this.state.array, element ] });
}

【讨论】：

【解决方案2】：

是的，你是对的，这是一回事。您应该阅读更多关于 JS 中的 pass by value and pass by reference 的信息。

当我们说

let x = some.array

我们正在复制参考（记得复制和粘贴是快捷方式）？这两个东西实际上都指向同一个真实的东西，并且不占用额外的空间。

您应该改用一些可以为您执行此操作的 JS。

let x = some.array.slice()

这将创建数组的真实副本。在现代 ES2015 上，您可以这样做

let x = [...some.array]

一种更优雅的方式。

【讨论】：