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

JavaScript

Sam神乐番长

2020-03-12

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

以下是我认为它将起作用的唯一方法，因为您不能this.state像文档中提到的那样直接更改。

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

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

第1124篇《改变React状态的首选方式是什么？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
JinJin猪猪 2020.03.12

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

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

或在ES5中：

this.setState(function(state) {
  return {
   list: state.list.concat(newObj)
  }
})
斯丁卡卡西 2020.03.12

更新2016

使用ES6，您可以使用：

this.setState({ list: [...this.state.list, ...newObject] });
路易Stafan 2020.03.12

从react docs（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])
}));
番长前端 2020.03.12

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

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

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

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

  this.setState(newState);

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android