javascript - 使用 (ES6) 计算属性名称更新嵌套对象

Question

就我而言，我使用的是 React.js，并且我想动态更新 deployOptions 对象中的值。

例如 -

初始状态如下:

getInitialState() {
    return {
      deployOptions: {
        config: null,
        action: 'deploy',
        env: 'qa'
      }
    }
  }

显然这是不正确的 - 但这就是我想要实现的目标

configOptionChange(option) {

    // option -> { key: 'env', value: 'prod' }

    this.setState({
      [deployOptions.option.key]: option.value
    });
  }

这样我的状态就会是

{
    deployOptions: {
      config: null,
      action: 'deploy',
      env: 'prod' // only this changes
    }
}

Answer 1

它不是特别漂亮，但我认为这是 ES6 能做的最好的事情:

configOptionChange({ key, value }) {
  this.setState({
    ...this.state,
    deployOptions: {
      ...this.state.deployOptions,
      [key]: value
    }
  });
}

它基本上等同于您自己的 Object.assign 解决方案，但使用 ES6 扩展 (...) 运算符(以及参数解构以实现良好的测量)。

这是第二个选项，虽然不那么聪明，但对我来说感觉更干净:

configOptionChange({ key, value }) {
  const { deployOptions: prevDeployOptions } = this.state;
  const deployOptions = { ...prevDeployOptions, [key]: value };
  this.setState({ ...this.state, deployOptions });
}