我有一个状态数组，比如说 this.state.arr。我想向这个 state 属性添加一些东西，然后再更改一些属性。
选项1
onChange(event){
this.state.arr.push('newvalue');
...
this.setState({some:'val',arr:this.state.arr})
}
选项 2
onChange(event){
var newArr = this.state.arr;
...
newArr.push('newvalue');
...
this.setState({some:'val',arr:newArr})
}
所以..我知道 this.state 应该被视为不可变的。但是可以像在选项 1 中那样使用它，我仍然从中设置状态，或者我是否需要使用选项 2 之类的东西，因此总是首先在内存中制作一个副本
目前，这是最好的方法。
this.setState(previousState => ({
myArray: [...previousState.myArray, 'new value']
}));
您提供的两个选项是相同的。它们都将仍然指向内存中的同一个对象并具有相同的数组值。您应该像您所说的那样将状态对象视为不可变的，但是您需要重新创建数组，使其指向一个新对象，设置新项目，然后重置状态。例子：
onChange(event){
var newArray = this.state.arr.slice();
newArray.push("new value");
this.setState({arr:newArray})
}
使用 concat 的另一种简单方法：
this.setState({
arr: this.state.arr.concat('new value')
})
如果您使用 ES6 语法，您可以使用扩展运算符将新项目作为单行添加到现有数组中。
// Append an array
const newArr = [1,2,3,4]
this.setState(prevState => ({
arr: [...prevState.arr, ...newArr]
}));
// Append a single item
this.setState(prevState => ({
arr: [...prevState.arr, 'new item']
}));
现在最好的离开。
this.setState({ myArr: [...this.state.myArr, new_value] })