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

Question

让我说我的this.state.list中有一个普通对象列表，然后我可以使用它来呈现孩子列表。那么将对象插入this.state.list的正确方法是什么？

以下是我认为唯一可行的方法，因为您无法直接改变文档中提到的this.state。

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

这对我来说似乎很难看。还有更好的方法吗？

Answer 1

concat会返回一个新数组，因此您可以执行

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

另一种选择是React的immutability helper

  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可以异步更新，所以不应该依赖它们的值来计算下一个状态。

所以你应该这样做：

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