有没有更好的方法使用 Spread 更新 JS 中的单个嵌套属性？

Question

我正在尝试使用

setState()

更新图表库的重度嵌套配置对象中的单个值

有没有更好的方法来使用

spread

来更新单个值？

我必须做以下很多事情：

const newValue = 'somevalue'

setState({
 ...config,
 chart: {
  ...config.chart,
  toolbar: {
   ...config.chart.toolbar,
   tools: {
    ...config.chart.toolbar.tools,
    valueIWantToUpdate: newValue
   }
  }
 }
})

基本上我想避免做很多

...config.property.property.property

，不确定这是否可能？

很乐意接受其他建议或更好的方法，而不是使用

spread

运算符。

Answer 1

如果您想坚持使用扩展运算符，这是设置要更新的对象的深层属性的唯一方法。但是您可以使用像 Lodash 这样的库，它具有诸如 merge 之类的方法，可以帮助您独立于叠瓦级别合并两个对象..

let config = {
  name: "John",
  age: 3,
  gender: "male",
  chart: {},
  toolbar: {
    name: "toolbar-1",
    tools: {
      value: 1
    }
  }
}

const change = {
  chart: {
    name: "John Doe",
    s: 'test'
  },
  toolbar: {
    tools: {
      toolset: "toolset"
    }
  }
}

let result = _.merge(config, change);

console.log(result);

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

Answer 2

  setState((prevState) => {
    const updatedState = {...prevState};
    updatedState.config.chart.toolbar.tools.valueIWantToUpdate = newValue;
    return updatedState;
  });