什么是更改React状态的首选方法？

比方说，我有一个在我的this.state.list中的纯对象列表，我可以用来呈现一个孩子的列表。 那么将对象插入到this.state.list的正确方法是什么？

以下是我认为它将起作用的唯一方式，因为您不能像doc中所提到的this.state直接改变this.state 。

 this._list.push(newObject): this.setState({list: this._list}); 

这对我来说似乎是丑陋的。 有没有更好的办法？

Answer 1

concat返回一个新的数组，所以你可以做

 this.setState({list: this.state.list.concat([newObject])}); 

另一个select是React的不变性帮手

  var newState = React.addons.update(this.state, { list : { $push : [newObject] } }); this.setState(newState); 

Answer 2

可以使用函数作为参数调用setState（） ：

 this.setState((state) => ({ list: state.list.concat(newObj) })) 

或在ES5中：

 this.setState(function(state) { return { list: state.list.concat(newObj) } }) 

Answer 3

2016年更新

有了ES6，你可以使用：

 this.setState({ list: [...this.state.list, ...newObject] }); 

Answer 4

从反应文档（ https://facebook.github.io/react/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous ）：

因为this.props和this.state可能会asynchronous更新，所以不应该依赖它们的值来计算下一个状态。

所以你应该这样做：

 this.setState((prevState) => ({ contacts: prevState.contacts.concat([contact]) }));