如何使用 useState 挂钩按索引更新数组？

Question

我有一个选择组件，我想用它来根据索引更新对象数组的值。

我这样使用钩子：

const [areas, setAreas] = useState(product.areas);

这将返回以下“区域”：

[
  0: {de: "Getraenke", en: "Drinks"},
  1: {de: "Snacks", en: "Snacks"}
]

我的选择组件如下所示：

{areas?.map((area: {de: string, en: string}, index: number) => (
  <Wrapper key={index}>
    <Select
      label="Area"
      name="product-area"
      value={area[lang] || ''}
      onChange={e => setArea([...area, { [lang]: e.target.value }])}
    >
      {areaOptions.map(option => (
        <option value={option} key={option}>
          {option}
        </option>
      ))}
    </Select>
  </InputWrapper>
))}

通过这种方式，不幸的是，在选择一个选项（此处为“糖果”）后，我得到了以下“区域”信息：

[
  0: {de: "Getraenke", en: "Drinks"},
  1: {de: "Snacks", en: "Snacks"}
  2: {en: "Sweets" }
]

因此，数组的第一个对象没有按预期更新，而是附加了另一个对象，不幸的是，它也缺少“de”语言。

我的目标是更新数组的第一个对象（或基于选择组件索引的对象），以便：

  0: {de: "Getraenke", en: "Drinks"}

..更新后的对象如下所示：

  0: {de: "Suessigkeiten", en: "Sweets"}

因此，数组中的对象应根据当前选择组件的索引进行更新，并考虑所选语言（默认“en”）。

Answer 1

最简单的方法是克隆数组，通过索引更新特定的数组项，然后使用 useState 替换旧数组，如下所示。

const updateArea = (e, lang, index) => {
  const updatedAreas = [...areas];
  updatedArea[index][lang] = e.target.value;
  setAreas(updatedAreas);
}

...

{areas?.map((area: {de: string, en: string}, index: number) => (
  <Wrapper key={index}>
    <Select
      label="Area"
      name="product-area"
      value={area[lang] || ''}
      onChange={e => updateArea(e, lang, index)}
    >
      {areaOptions.map(option => (
        <option value={option} key={option}>
          {option}
        </option>
      ))}
    </Select>
  </InputWrapper>
))}