将对象存储在React组件的状态中？

是否有可能存储一个对象在React组件的状态？ 如果是，那么我们如何使用setState来更改该对象中某个键的值？ 我认为它在语法上不允许写this.setState({ abc.xyz: 'new value' }); 在类似的路线上，我还有一个问题：在React组件中有一组variables是否可以在组件的任何方法中使用，而不是将它们存储在一个状态中？ 您可以创build一个简单的对象来保存所有这些variables，并将其置于组件级别，就像您将如何在组件上声明任何方法一样。 它很可能会遇到在代码中包含大量业务逻辑的情况，并且需要使用许多variables（其值通过多种方法更改），然后根据这些值更改组件的状态。 因此，不要将所有这些variables保持在状态中，而只需保留那些值直接反映在UI中的variables。 如果这种方法比我在这里写的第一个问题好，那么我不需要在状态中存储一个对象。

Answer 1

除了kiran的post之外，还有更新帮手 （以前是反应插件 ）。 这可以使用npm install immutability-helper来npm install immutability-helper

 import update from 'immutability-helper'; var abc = update(this.state.abc, { xyz: {$set: 'foo'} }); this.setState({abc: abc}); 

这将创build具有更新值的新对象，其他属性保持不变。 当你需要像push到一个数组一样的事情，并且同时设置一些其他的值的时候，这会更有用。 有些人使用它，因为它提供了不变性。

如果你这样做，你可以有以下弥补的performance

 shouldComponentUpdate: function(nextProps, nextState){ return this.state.abc !== nextState.abc; // and compare any props that might cause an update } 

Answer 2

1）this.setState（{abc.xyz：'new value'}）; 语法是不允许的。 你必须传递整个对象。

 this.setState({abc: {xyz: 'new value'}}); 

如果你在abc有其他variables

 var abc = this.state.abc; abc.xyz = 'new value'; this.setState({abc: abc}); 

2）你可以有普通的variables，如果他们不依赖this.props和this.state。

Answer 3

this.setState({abc: {xyz: 'new value'}}); 将不会工作，因为state.abc将被完全覆盖，不合并。

这适用于我：

 this.setState((previousState) => { previousState.abc.xyz = 'blurg'; return previousState; }); 

除非我正在阅读文档错误，否则Facebook推荐上述格式。 https://facebook.github.io/react/docs/component-api.html

此外，我猜最直接的方式没有变异状态是通过使用ES6传播/rest运算符直接复制：

 const newState = { ...this.state.abc }; // deconstruct state.abc into a new object-- effectively making a copy newState.xyz = 'blurg'; this.setState(newState); 

Answer 4

您可以在对象中传播以前的值以避免重写

 this.setState({ abc: { ...this.state.abc, xyz: 'new value' } }); 

Answer 5

即使可以通过不可变性帮助程序或类似的方法来完成，除非我真的必须添加外部依赖项，否则我不想添加外部依赖项。 当我需要这样做时，我使用Object.assign 。 码：

 this.setState({ abc : Object.assign({}, this.state.abc , {xyz: 'new value'})}) 

也可以用于HTML事件属性，例如：

 onChange={e => this.setState({ abc : Object.assign({}, this.state.abc, {xyz : 'new value'})})} 

Answer 6

它为我工作。

 _onPress = () => { this.state.abc.xyz = "new value"; this.setState({}); }