如何更新 setState 中的复杂嵌套对象？

Question

How can I access the index inside array and update it without removing property and value inside the object?

  const [data, setData] = useState({

    commission: [{ commissionFor: "", commissionPercentage: "" }],
    salary: [{ salaryFor: "", salaryPrice: "" }],
    off: [{ offFor: "", offPercentage: "" }],
  });

          <Autocomplete
            onChange={(e, value) =>
              setData((data) => ({
                ...data,
                ["commission"]: {
                  ...data[0],
                  ["commissionFor"]: value || e.target.value,
                },
              }))
            }
            renderInput={(params) => <TextField {...params} label="Commission" />}
          />

Answer 1

Can be done like this

setData((data) => ({
    ...data,
    commission: data.commission.map((c, index) => index === 0 ? {...c, commissionFor: value || e.target.value}: c)
}))

Answer 2

如果您正在映射这些数据，则在单击数据后使用 0 的索引位置发送该项目的索引