如何在 React 中更改对象数组的 state？

Question

每当在输入中键入内容时，我都试图更改包含 object 的数组的 state。 我要更改的数组的 state 如下所示：

const defaultCV = {
personalInfo: {
firstName: "",
lastName: "",
title: "",
about: "",
},
education: [
{
  id: uniqid(),
  university: "",
  city: "",
  degree: "",
  subject: "",
  from: "",
  to: "",
},
],

具体来说，我想更改'教育'部分的state。 我当前的非工作代码如下所示：

const handleEducationChange = (e) => {
setCV((prevState) => ({
  ...prevState,
  education: [
    {
      ...prevState.education,
      [e.target.id]: e.target.value,
    },
  ],
}));
};

当我输入输入并触发 function 时，我收到错误消息“警告：列表中的每个孩子都应该有一个唯一的“关键”道具。” 在过去的几个小时里，我一直在努力完成这项工作，对于我做错了什么的任何帮助将不胜感激。

Answer 1

您是否使用 Array.map() 方法来呈现组件列表？ 这是该错误的常见原因。 例如，如果您正在映射教育数组。

您可以使用 object id 作为键来修复，因为它已经为每个 object 生成：

defaultCV.education.map(institution => {
     return <Component key={institution.id} institution={institution} />
}

Answer 2

您正在将一个数组解构为 object，这将不起作用

    education: [{ // this is the object you are trying to restructure into
      ...prevState.education, // this here is an array in your state
      [e.target.id]: e.target.value,
   }, ],
 }));

Answer 3

假设您呈现此输入字段：

<input id='0' type='text' name='university' value={props.value} />

你的 event.target object 将包含这些道具：{id = '0', name = 'university', value = 'some input string'}

更新 state 时，你必须首先找到具有此 id 属性的数组项（对象），然后你可以更改其 'name' 属性并返回新的 state object。

这对我有用：

setCV(prevState => {
const eduObjIdx = prevState.education.findIndex(obj => obj.id === +e.target.id)
prevState.education[eduObjIdx][e.target.name] = e.target.value

return {
    ...prevState,
    education: [
        ...prevState.education.splice(0, eduObjIdx),
        prevState.education[eduObjIdx],
        ...prevState.education.splice(eduObjIdx + 1),
    ],
}

})

确保在渲染组件时发送输入值的当前 state：

<Component value={state.education[currentId].id} />

其中 currentId 是您正在呈现的大学的 ID。 如果你渲染它映射一个数组，不要忘记键（回答为 0），否则你会得到上面的错误信息。 这样你就不会改变整个教育阵列。 虽然可能不是最好的解决方案。