React中如何使用useState Hook按索引更新对象数组

从实际运行后的数组结构可以看出，当前实现存在两处核心逻辑偏差，导致更新行为完全不符合预期：

• 更新数组的逻辑方向错误：onChange 中没有基于索引定位要修改的目标数组元素，反而直接把完整的旧 areas 数组展开后，在末尾追加了一个新对象——对应代码中的 [...area, { [lang]: e.target.value }] 实际是变量名笔误，运行时展开的是全局的旧 areas 数组，因此原有数组的两个元素完全没有被修改，只在数组末尾新增了一条独立内容，和观测到的结果完全一致。
• 更新元素时字段丢失：追加的新对象只携带了当前选中语言的键值，没有展开原有元素的所有字段，因此新对象会缺失另一语言（比如de）的内容。

另外还有两处细节笔误需要修正：

• 用 useState 定义的状态更新方法是 setAreas，但 onChange 里调用的是 setArea，会触发方法未定义的报错。
• 渲染逻辑里组件开标签是 <Wrapper>，闭合标签却写成了 </InputWrapper>，属于标签不匹配的语法错误。

数组类状态的更新必须遵循不可变更新原则：不直接修改原数组，基于最新的旧数组生成新数组，仅对目标索引位置的元素做字段更新，其余位置的元素完全保留原有结构。
推荐使用函数式状态更新的写法，避免闭包导致拿到旧状态值的问题，核心流程为：

1. 调用 setAreas 时传入回调，拿到当前最新的 prevAreas 完整数组
2. 遍历旧数组，仅对当前触发选择框修改的索引位置做字段覆盖，其余元素原样返回
3. 对目标索引的元素，先展开该元素的所有原有字段，再覆盖当前选中语言对应的键值，保证其他语言的字段不丢失

{areas?.map((area: {de: string, en: string}, index: number) => (
  <Wrapper key={index}>
    <Select
      label="Area"
      name={`product-area-${index}`} // 修正多个Select重名的问题
      value={area[lang] || ''}
      onChange={(e) => {
        setAreas(prevAreas => {
          return prevAreas.map((prevArea, prevIndex) => {
            // 仅更新当前触发修改的索引位置
            if (prevIndex === index) {
              // 保留原有所有语言字段，仅更新当前选中语言的取值
              return {
                ...prevArea,
                [lang]: e.target.value
              }
            }
            // 非目标位置的元素完全保留原有结构
            return prevArea
          })
        })
      }}
    >
      {areaOptions.map(option => (
        <option value={option} key={option}>
          {option}
        </option>
      ))}
    </Select>
  </Wrapper> // 修正标签不匹配的问题
))}

按上述逻辑修改后，选择选项时会精准定位到当前Select对应的数组索引位置，仅更新该位置元素的当前语言字段，原有其他语言的字段完全保留，最终结构完全符合预期。例如原索引0的元素为 {de: "Getraenke", en: "Drinks"}，当语言切换为de并选择"Suessigkeiten"选项后，该元素会更新为 {de: "Suessigkeiten", en: "Drinks"}，不会额外追加新数组元素，也不会丢失原有字段。

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