如何在reducer中访问带数字索引的嵌套对象内的newTabsState属性

你的代码存在两个核心错误：

• 展开sheets层级时错误地展开了顶层state，而非原有state.sheets，会导致状态结构完全错乱
• 遗漏了数字索引层0：newTabsState是sheets.0的子属性，并非直接挂载在sheets下

如果你的需求是固定修改索引为0的sheet下的newTabsState，可以直接用下面的写法：

const setNewtabState = (state, payload) => {
  return {
    ...state,
    sheets: {
      // 先保留sheets下所有原有索引对应的sheet数据
      ...state.sheets,
      // 针对索引为0的sheet做更新
      0: {
        // 保留0号sheet下除了newTabsState之外的所有原有属性
        ...state.sheets[0],
        newTabsState: payload
      }
    }
  }
}

如果后续需要修改任意索引的sheet，建议把sheetId放到payload里，用计算属性实现：
假设payload结构为 { sheetId: 0, newTabValue: 'factors' }，代码如下：

const setNewtabState = (state, payload) => {
  const { sheetId, newTabValue } = payload
  return {
    ...state,
    sheets: {
      ...state.sheets,
      // 用方括号计算属性匹配动态索引
      [sheetId]: {
        ...state.sheets[sheetId],
        newTabsState: newTabValue
      }
    }
  }
}

• reducer更新嵌套对象必须逐层操作，每一层都要先展开原有属性，再覆盖需要修改的字段，避免丢失其他未修改的状态
• 数字作为对象键时，推荐用方括号语法[索引]访问，动态索引场景必须使用方括号计算属性写法
• 所有修改都要保证是不可变更新，不能直接修改原state对象的属性

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