在React中修改状态

Question

我已经读到不建议直接更新状态，例如：

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（）覆盖它。

我已经在各种教程中看到了这个例子，它不会更好＆＃39;制作数组的副本？

Answer 1

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

当我们说

时

let x = some.array

我们正在复制引用（请记住复制并粘贴为快捷方式）？这两件事实际上都指向同一个真实的东西而且没有多余的空间。

你应该使用一些可以为你做这件事的JS。

let x = some.array.slice()

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

let x = [...some.array]

更加优雅的方式。

Answer 2

点击此处的文档https://reactjs.org/docs/state-and-lifecycle.html。

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

在设置状态时使用临时变量，在设置状态变量之前需要对'element'进行操作时使用。因为setState可以异步调用。在您的情况下，只接受

是可以接受的

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