使用React setState的子键的计算值

Question

我希望能够在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 });

但是a可以算作计算值吗？

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

const subKeyName = 'a';

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

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

Answer 1

如果要覆盖foo中的旧属性：

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

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

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

最后一个例子是使用对象扩展语法，它还不是javascript的标准化部分（目前是stage 4 proposal，所以很快就会成为语言的一部分）。所以如果你想在这个时候使用它，你应该使用this babel plugin。如果您没有该插件，则标准javascript的等价物是：

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