React使用useState更新嵌套对象内数组指定索引的属性值

问题根因 #

你之前的代码中用对象字面量{}包裹requirements的更新逻辑，导致原本的数组类型被转换为以索引为键的普通对象。

修复方案 #

你需要用数组字面量[]构造新的requirements数组，以下提供两种可直接使用的写法：

写法1：数组切片（性能更优，适合大数组场景） #

setItemUpdated((prev) => ({
  ...prev,
  requirements: [
    ...prev.requirements.slice(0, idx),
    { ...prev.requirements[idx], customValue: val },
    ...prev.requirements.slice(idx + 1)
  ]
}))

逻辑说明：截取目标索引idx之前的所有元素、插入更新后的目标元素、拼接idx之后的所有元素，最终生成完整的新数组。

写法2：map遍历（语法更简洁，适合小数组场景） #

setItemUpdated((prev) => ({
  ...prev,
  requirements: prev.requirements.map((item, index) => 
    index === idx ? { ...item, customValue: val } : item
  )
}))

逻辑说明：遍历原数组，匹配到目标索引时返回更新后的对象，其余元素直接返回原引用，在保证不可变更新的前提下简化代码。

注意事项 #

两种写法都遵循了React状态更新的不可变原则，嵌套层级的每一层修改都会生成新的引用，确保React可以正常检测到状态变更触发重渲染。

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