如何使用 TypeScript 中 React useState 中的新值更新数组中对象中键的值答案

【问题标题】：How to update value of a key in object in an array with the new value in React useState in TypeScript如何使用 TypeScript 中 React useState 中的新值更新数组中对象中键的值
【发布时间】：2021-08-13 17:41:14
【问题描述】：

我有一个函数将输入作为输入字段的名称并将该输入字段的值作为

function handleChange(e:React.ChangeEvent<HTMLInputElement>):void{
    const { name, value } = e.target;
    const key = name
    let newArr = [...form];
    newArr.map(item => {
      return {...form , [key]: value}
    });

    setForm(newArr)
  }

默认视图的结构是这样的：

    const form = [{
  "Name":"Nagesh",
  "Email":"abc@gmail.com",
  "Address" : {
    "House_Number":"123",
    "Street_Name":"something",
    "City":"example",
  },
  "Phone_Number":"567899090"
}]

现在在点击onChange 事件后，我收到输入字段的名称和当前输入字段的值到handleChange 函数。问题是newArr 不会用新值更新旧值，也不会用新值更新状态。

例如，如果我将值传递给 name 作为输入字段的名称，即“名称”，其值为“Nagesh Katna”，它会获取值但不会更新 newArr 的归档 [{"Name": "Nagesh Katna"}]

如果我console.log(newArr)。数组保持默认值。我使用 TypeScript 和语义 UI 作为前端。

我已经为表单定义了一个具有相同结构的接口，并以某种方式使用状态

  const defaultView: Values[] = []
  const [form, setForm]: [Values[], (fetch: Values[]) => void] = useState(defaultView);

请保存我的周末。

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

您正在这里创建一个新数组，form 的浅表副本：

let newArr = [...form];

您正在对其进行映射以在此处创建另一个新数组：

newArr.map(item => {
  return {...form , [key]: value}
});

但您从不使用.map 的结果。您需要将其分配给一个变量，并将其传递给setForm。

另外，{ ...form 可能是一个错字 - 您的意思是 { ...item？

const newForm = newArr.map(item => {
  return {...item , [key]: value}
});
setForm(newForm);

更简洁：

setForm(
    form.map(item => ({
        ...item,
        [name]: value
    }))
);

【讨论】：

感谢您的快速回答。不，没有错字。我尝试了很多不同的东西，但都没有奏效，所以我只是粘贴了我尝试的最后一件事。我正在尝试您的解决方案。
这看起来像是一个错字，因为它没有意义——form 是一个数组，而不是一个对象，因此将form 数组传播到一个对象中以返回是没有意义的。跨度>
您的解决方案确实有效。正如我所说，我尝试了很多事情，以至于我迷失了自己所做的事情。我可以看出使用表单是多么荒谬。