React JS中如何设置数组对象capacities[0].value的值？

你的代码存在两个关键问题：

• client是数组类型，不是单个对象，不能直接用对象展开{...client}的方式处理。
• 即使是嵌套对象结构，也不能在对象字面量里直接写capacities[0].value作为键，这属于语法错误。

要正确更新capacities[0].value，需要遵循React状态不可变的原则，逐层复制并修改嵌套结构：

写法一（分步清晰版） #

onChange={(e) => {
  // 复制原client数组
  const newClients = [...client];
  // 复制第一个对象的capacities数组
  const newCapacities = [...newClients[0].capacities];
  // 修改第一个capacity的value，同时保留其他属性
  newCapacities[0] = { ...newCapacities[0], value: e.target.value };
  // 更新第一个对象的capacities
  newClients[0] = { ...newClients[0], capacities: newCapacities };
  // 触发状态更新
  setClient(newClients);
}}

写法二（嵌套展开简洁版） #

onChange={(e) => {
  setClient(prevClients => [
    // 复制数组第一个对象
    {
      ...prevClients[0],
      // 重新生成capacities数组，替换第一个元素的value
      capacities: [
        { ...prevClients[0].capacities[0], value: e.target.value },
        // 保留capacities里的其他元素
        ...prevClients[0].capacities.slice(1)
      ]
    },
    // 保留client数组里的其他对象
    ...prevClients.slice(1)
  ]);
}}

核心逻辑是：不能直接修改原状态中的嵌套数组/对象，必须创建新的副本并修改副本，再用副本替换原状态，这样React才能检测到状态变化并重新渲染组件。

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