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

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

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

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

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

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

因此，您不必保留所有这些变量处于状态，而只需保留其值应直接反映在UI中的那些变量。

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

除了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
}

1. this.setState({ abc.xyz: 'new value' });语法不允许。您必须传递整个对象。

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

   如果您在abc中还有其他变量

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

2. 如果它们不依赖this.props和，则可以具有普通变量this.state。

您可以对对象中的先前值使用ES6扩展以避免覆盖

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

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传播/休息操作员直接复制：

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

即使可以通过不可变性帮助程序或类似方法完成此操作，除非确实需要，否则我不会在代码中添加外部依赖项。当我需要做时，我使用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'})})}

只需一行代码即可轻松完成

this.setState({ object: { ...this.state.object, objectVarToChange: newData } })