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

Question

是否可以在React组件的状态下存储对象？如果是，那么我们如何使用来更改该对象中键的值setState？我认为在语法上不允许这样写：

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

同样，我还有一个问题：在React组件中可以有一组变量，以便可以在组件的任何方法中使用它们，而不是将它们存储在状态中，这还可以吗？

您可以创建一个包含所有这些变量的简单对象，并将其放在组件级别，就像在组件上声明任何方法一样。

很可能会遇到这样的情况，即您在代码中包含了很多业务逻辑，并且需要使用许多变量，这些变量的值可以通过几种方法更改，然后您可以根据这些值更改组件的状态。

因此，您无需保留所有这些变量在状态中，而是仅保留其值应直接反映在UI中的那些变量。

如果这种方法比我在这里写的第一个问题更好，那么我就不需要在状态中存储对象。

Answer 1

除了kiran的帖子之外，还有更新助手（以前是react
addon
）。可以使用以下命令与npm一起安装npm install immutability-helper

import update from 'immutability-helper';

var abc = update(this.state.abc, {
   xyz: {$set: 'foo'}
});

this.setState({abc: abc});

这将创建一个具有更新值的新对象，并且其他属性保持不变。当您需要执行诸如推入数组并同时设置其他值之类的操作时，此功能将更为有用。有些人在各处使用它，因为它具有不变性。

如果这样做，您可以采取以下措施来弥补

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