通过 React setState 使用子键的计算值

我希望能够使用计算值sub keys在 React 中更新状态时。

我了解如何在简单的设置中使用计算值，如下所示：

this.setState({ [name]: value });

但我在让键值计算适用于这样的情况时遇到困难：

constructor(props) {
    super(props);
    this.state = {
        foo: { a: 1, b: 2 }
    }; 
}

const keyToChange = 'a';
const value = 3;

this.setState({ foo[keyToChange]: value });

我怎样才能制作出类似的东西

this.setState({ foo.a: value });

But where a可以是计算值?

我尝试了以下方法，但似乎不起作用：

const subKeyName = 'a';

// Doesn't work
const nameOfKey = 'foo.' + subKeyName;
this.setState({ [`${nameOfKey}`]: value });

// Doesn't work
this.setState({ foo[subKeyName]: value });

如果你想覆盖 foo 中的旧属性：

this.setState({ 
  foo: {
    [keyToChange]: value 
  }
});

如果您想保留 foo 中的旧属性，但只需在其中添加（或替换）一个键：

this.setState(oldState => {
  return {
    foo: {
      ...oldState.foo,
      [keyToChange]: value
    }
  }
});

最后一个例子是使用对象扩展语法，它还不是 javascript 的标准化部分（目前是第四阶段提案 https://github.com/tc39/proposal-object-rest-spread，所以它将很快成为该语言的一部分）。所以你应该使用这个 babel 插件 https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread.html如果你这个时候想用的话。如果您没有该插件，则标准 javascript 的等效内容是：

this.setState(oldState => {
  return {
    foo: Object.assign({}, oldState.foo, {[keyToChange]: value})
  }
});