我想在state数组的末尾添加一个元素,这是正确的方法吗?
state
this.state.arrayvar.push(newelement); this.setState({arrayvar:this.state.arrayvar});
我担心如果就地修改阵列push可能会造成麻烦-是否安全?
push
制作数组副本的另一种选择setState似乎是浪费的。
setState
该阵营的文档说:
将此this.state视为不可变的。
您push将直接更改状态,即使您此后再次“重置”状态,也有可能导致易于出错的代码。F.ex,这可能会导致某些生命周期方法(如componentDidUpdate不会触发)。
componentDidUpdate
在更高版本的React中,建议的方法是在修改状态以防止竞争情况时使用 updater 函数:
this.setState(prevState => ({ arrayvar: [...prevState.arrayvar, newelement] }))
与使用非标准状态修改可能会遇到的错误相比,内存“浪费”不是问题。
早期React版本的替代语法
您可以使用concat干净的语法,因为它会返回一个新数组:
concat
this.setState({ arrayvar: this.state.arrayvar.concat([newelement]) })
在ES6中,您可以使用Spread运算符:
this.setState({ arrayvar: [...this.state.arrayvar, newelement] })