React中如何通过setState更新复杂嵌套对象且不丢失原有属性

你的代码存在两个核心问题导致属性丢失、结构异常：

• commission 字段初始值为数组类型，更新时直接给该字段赋值了对象，破坏了原有数据结构
• 展开取值时错误使用 ...data[0]，回调参数里的 data 是外层整个state对象，不存在索引为0的属性，根本没有取到commission数组内的目标元素

更新嵌套结构的state必须遵循不可变数据原则，每一层结构都要和原结构保持一致，数组更新时先拷贝原数组，再替换指定索引的元素，不要直接修改原state引用。
如果是更新commission数组第0项的commissionFor属性，可按如下方式写：

<Autocomplete
  onChange={(e, value) =>
    setData((prevData) => {
      // 替换为你需要更新的实际数组索引，动态场景下可传入循环拿到的index
      const updateIndex = 0;
      return {
        // 浅拷贝外层对象，保证salary、off等同级字段不丢失
        ...prevData,
        // commission字段保持数组类型
        commission: prevData.commission.map((item, index) => {
          if (index === updateIndex) {
            return {
              // 浅拷贝当前数组项，保证commissionPercentage等同级属性不丢失
              ...item,
              commissionFor: value || e.target.value
            }
          }
          // 非目标索引项直接返回原值，不做修改
          return item;
        })
      }
    })
  }
  renderInput={(params) => <TextField {...params} label="Commission" />}
/>

如果是渲染commission列表、每一项对应一个Autocomplete的动态场景，直接把循环拿到的索引作为更新目标即可：

{data.commission.map((_, index) => (
  <Autocomplete
    key={index}
    onChange={(e, value) =>
      setData((prevData) => ({
        ...prevData,
        commission: prevData.commission.map((item, i) =>
          i === index ? { ...item, commissionFor: value || e.target.value } : item
        )
      }))
    }
    renderInput={(params) => <TextField {...params} label={`Commission ${index + 1}`} />}
  />
))}

• 逐层做浅拷贝：外层对象拷贝保证同级其他字段保留，数组项拷贝保证项内其他属性保留
• 保持原有数据类型：原字段是数组就不能赋值为对象，原字段是对象就不能赋值为基本类型
• 禁止直接修改原state：不要通过索引直接给原数组项赋值，始终返回新的对象/数组引用，符合React的更新触发机制

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