javascript - 改变React状态的首选方法是什么?

假设我在this.state.list中有一个普通对象列表,然后我可以用它来渲染子列表。 那么将对象插入this.state的正确方法是什么?

以下是我认为它将起作用的唯一方法,因为你不能直接改变文档中提到的this.state

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

这对我来说似乎很难看。 有没有更好的办法?

Khoi asked 2019-08-05T04:27:25Z
4个解决方案
162 votes

concat返回一个新数组,所以你可以这样做

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

另一个选择是React的不变性助手

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

  this.setState(newState);
Heap answered 2019-08-05T04:27:50Z
40 votes

可以使用函数作为参数调用setState():

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

或者在ES5中:

this.setState(function(state) {
  return {
   list: state.list.concat(newObj)
  }
})
Nyalab answered 2019-08-05T04:28:22Z
18 votes

2016年更新

使用ES6,您可以使用:

this.setState({ list: [...this.state.list, ...newObject] });
Ashish Chaudhary answered 2019-08-05T04:28:50Z
7 votes

来自反应文档([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])
}));
jcgzzc answered 2019-08-05T04:29:30Z
translate from https://stackoverflow.com:/questions/23966438/what-is-the-preferred-way-to-mutate-a-react-state