我想在状态数组的末尾添加一个元素，这是正确的方法吗?
this.state.arrayvar.push(newelement);
this.setState({ arrayvar:this.state.arrayvar });
我担心用push修改数组可能会导致麻烦——它安全吗?
另一种方法是复制数组，setstate看起来很浪费。
当前回答
正如@nilgun在评论中提到的，你可以使用react不可变helper。我发现这非常有用。
从文档中可以看出:
简单的推
var initialArray = [1, 2, 3];
var newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]
initialArray仍然是[1,2,3]。
其他回答
this.setState((prevState) => {
const newArray = [...prevState.array];
newArray[index] = updatedValue;
return { array: newArray };
});
React文档说:
对待这个问题。状态，仿佛它是不可变的。
您的推送将直接改变状态，这可能会导致容易出错的代码，即使您随后再次“重置”状态。例如，它可能导致一些生命周期方法(如componentDidUpdate)无法触发。
在以后的React版本中，推荐的方法是在修改状态时使用updater函数来防止竞争条件:
this.setState(prevState => ({
arrayvar: [...prevState.arrayvar, newelement]
}))
与使用非标准状态修改可能面临的错误相比，内存“浪费”不是一个问题。
早期React版本的替代语法
你可以使用concat来获得一个干净的语法，因为它返回一个新数组:
this.setState({
arrayvar: this.state.arrayvar.concat([newelement])
})
在ES6中，你可以使用扩展操作符:
this.setState({
arrayvar: [...this.state.arrayvar, newelement]
})
这段代码为我工作:
fetch('http://localhost:8080')
.then(response => response.json())
.then(json => {
this.setState({mystate: this.state.mystate.push.apply(this.state.mystate, json)})
})
正如@nilgun在评论中提到的，你可以使用react不可变helper。我发现这非常有用。
从文档中可以看出:
简单的推
var initialArray = [1, 2, 3];
var newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]
initialArray仍然是[1,2,3]。
如果使用ES6，这是最简单的方法。
initialArray = [1, 2, 3];
newArray = [ ...initialArray, 4 ]; // --> [1,2,3,4]
新数组为[1,2,3,4]
在React中更新你的状态
this.setState({
arrayvar:[...this.state.arrayvar, newelement]
});
了解关于数组解构的更多信息
