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})
  }
});

在React setState中使用子键的计算值

1 个答案: