React JS中如何更新包含嵌套对象的state？

嘿，我懂你碰到的这个问题——更新嵌套的state对象时，总是把之前的属性给覆盖掉，没法保留原有值同时更新新内容对吧？这在React里处理嵌套state是个很常见的小误区，咱们一步步来捋清楚。

先说说你当前写法的问题 #

你现在多次调用setState，而且每次更新custom的时候都只传了单个属性，比如custom: { data: data }，这相当于直接替换了整个custom对象，而不是在原有基础上合并新值。再加上React可能会批量处理多次setState调用，最后一次的更新就会把前面的都覆盖掉，自然得不到你想要的结果。另外你展开的方式也不对，...this.state.custom是把custom的属性放到了外层state里，这会导致state结构混乱。

正确的更新方式 #

要保留原有state的所有值，同时更新指定的嵌套属性，咱们需要逐层展开合并，而且最好用函数式的setState（因为state更新是异步的，函数式能确保拿到最新的前一次state）。

1. 一次性更新所有值

如果要同时更新custom.data、custom.categories和index，可以这样写：

this.setState(prevState => ({
  // 先保留外层state的所有原有属性（比如原来的custom和index）
  ...prevState,
  // 然后更新custom对象：先保留它的原有属性，再替换新值
  custom: {
    ...prevState.custom,
    data: newUpdatedData, // 你的新data值
    categories: newUpdatedCategories // 你的新categories值
  },
  // 更新index
  index: newUpdatedIndex
}));

2. 分多次单独更新

如果是在不同时机分别更新data、categories或者index，每次更新都要确保合并原有属性：

• 更新custom.data时：

this.setState(prevState => ({
  ...prevState,
  custom: {
    ...prevState.custom,
    data: newData
  }
}));

• 更新custom.categories时：

this.setState(prevState => ({
  ...prevState,
  custom: {
    ...prevState.custom,
    categories: newCategories
  }
}));

• 更新index时就简单了，因为它是外层属性：

this.setState(prevState => ({
  ...prevState,
  index: newIndex
}));

这样每次更新都会保留之前state里的所有值，只替换你需要更新的部分，最终就能得到你期望的state结构：

state = { 
  custom: { 
    data: new updated value, 
    categories: new updated value 
  }, 
  index: new updated value 
}

内容的提问来源于stack exchange，提问作者user4217999