使用 usestate 更新数组的 object

Question

我有一个像这样的 object：

 { name:"lorem ipsum", skills:[] }

现在，我有一个用户添加技能的表单，我想根据该表单的输入使用 usestate 挂钩更新 object

例如，如果用户在表格中添加 HTML,CSS 和 JavaScript，则 ZA8CFDE6331BD59EB2AC96B81 应如下所示：

 { name:"lorem ipsum", skills:['html','css','JavaScript'] }

我怎样才能做到这一点？

Answer 1

您可以将名称和技能分成两个不同的变量，但如果您坚持将其保留为一个 object，您可以这样做：

 const [obj, setObj] = useState({name:"lorem ipsum",skills:[]}

要初始化您的 state，假设您从表单中获得的技能列表称为 form_skills：

 setObj({...obj, skills: form_skills})

这利用了spread operator ，它基本上将您的 object 复制到一个新的中，并用您之后定义的键替换所有值，在这种情况下，只有技能（或添加到对象）。

要单独更新每个技能，您还可以使用spread operator 。 只需复制skills数组，更新项目并使用新的更新数组设置 state。

 let skills = [...obj.skills]; # makes shallow copy of array skills[i] = 'new value'; setObj({...obj, skills});