React使用扩展运算符设置state时products数组id丢失如何解决

• 对象展开顺序错误：第一个Select中定义新product对象的写法为{id: 1, ...data.products[0]}，JS对象展开时后出现的属性会覆盖前面的同名属性。如果data.products[0]中存在id字段（哪怕值为undefined），都会覆盖你前置声明的id: 1，导致最终生成的对象丢失id属性。
• 状态更新未使用函数式写法：你直接在setData中引用当前的data变量，在React批量更新、连续触发更新或存在闭包陷阱的场景下，读取到的data可能是过期的旧状态，导致更新结果丢失。
• 缺少空数组兼容逻辑：初始状态products为空数组，此时data.products[0]为undefined，展开undefined会得到空对象，第一次触发更新时新增的元素只会保留你显式声明的属性。

调整对象展开顺序，把需要强制生效的自定义属性（id、qty）放在展开逻辑的末尾，避免被原有属性覆盖；同时改用函数式更新获取实时的最新状态，补充空数组兼容判断即可。修复后代码如下：

// 第一个Select
<Select onChange={() => setData(prev => {
  // 兼容products为空的情况，默认取空对象
  const firstProduct = prev.products[0] || {}
  return {
    ...prev,
    products: [...prev.products, {...firstProduct, id: 1}]
  }
})}></Select>

// 第二个Select
<Select onChange={() => setData(prev => {
  const firstProduct = prev.products[0] || {}
  return {
    ...prev,
    products: [...prev.products, {...firstProduct, qty: 1}]
  }
})}></Select>

如果需要第一次新增元素就默认包含id和qty，可以在空数组兼容位置设置默认值，例如const firstProduct = prev.products[0] || {id: 1, qty: 1}，可根据实际业务需求调整。

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