React中如何正确索引嵌套对象数组字段并更新postData状态

根本原因 #

你在实现状态更新时，混淆了数组和普通对象的展开规则，直接把多层嵌套的数组类型当成普通对象处理，破坏了初始定义的postData结构，才会出现属性无法访问、字段类型被识别为any的问题。

具体错误位置 #

• 结构类型不匹配：初始postData中，skills是对象数组、每个skill下的ends_level也是对象数组，但你更新时直接对这两个数组做对象展开，把原本的数组结构改成了普通对象，编辑器自然无法识别原本定义的course、level字段类型
• 错误的层级更新逻辑：
  • 原本skills是数组，你写成{...postData.skills, ends_level: {...}}，相当于直接把skills从数组替换成了一个挂着ends_level属性的对象，完全偏离初始结构
  • 进一步对ends_level数组做对象展开，挂course属性，同样把ends_level从数组替换成了普通对象
• 受控组件缺失：绑定course值的TextField没有设置value属性，就算状态更新了，输入框也不会回显当前值，表现为无法正常绑定数据

修正代码 #

多层嵌套数组的不可变更新，必须逐层遍历匹配对应索引的数组元素，再做对象展开更新。针对你当前操作第一个skill项、第一个ends_level项的场景，修正后的TextField实现如下：

<TextField
  // 用可选链兜底异步数据加载时的空数组访问
  value={postData.skills[0]?.ends_level[0]?.course ?? ''}
  onChange={(e) =>
    setPostData(prev => ({
      ...prev,
      // 更新skills数组
      skills: prev.skills.map((skill, skillIndex) => {
        // 匹配目标skill项，示例取索引0的项
        if (skillIndex !== 0) return skill
        return {
          ...skill,
          // 更新skill内部的ends_level数组
          ends_level: skill.ends_level.map((levelItem, levelIndex) => {
            // 匹配目标ends_level项，示例取索引0的项
            if (levelIndex !== 0) return levelItem
            return {
              ...levelItem,
              course: e.target.value
            }
          })
        }
      })
    }))
  }
/>

额外提示：如果后续需要动态渲染多组skill、ends_level的输入项，需要在渲染循环中将对应的skillIndex、levelIndex作为参数传入事件处理函数，才能精准更新对应位置的字段。另外在useEffect中同步Redux返回的profile数据到postData时，建议对skills、ends_level这类数组字段做结构兜底，避免接口返回空值导致索引访问报错。

内容的提问来源于stack exchange，提问作者frustrated-dev