使用对象更新对象中的几个状态来反应useState [关闭]答案

【问题标题】：React useState with object update several states in object [closed]使用对象更新对象中的几个状态来反应useState [关闭]
【发布时间】：2021-05-26 11:48:57
【问题描述】：

如何仅更改对象 useState 中的几个状态？例如：

const [team, setTeam] = useState({
manager: "",
captain: "",
goalkeeper: "",
defender: "" })

现在我只想同时更新价值经理和守门员。这怎么可能？

我试过了：

setTeam({ ...team, manager: newValue });
setTeam({ ...team, captain: newValue2 });

但它只更新其中一个。

我也试过了：

 setTeam({ ...team, manager: newValue, captain: newValue2 });

没用。

可以只改变一个useState对象中的一定数量的变量吗？

感谢您的帮助！

【问题讨论】：

能否请您显示完整的代码，因为您的代码看起来不错。

标签： javascript reactjs object web use-state

【解决方案1】：

与类组件中的 setState 方法不同，useState 可以不会自动合并更新对象。你可以复制这个通过将函数更新器形式与对象传播相结合的行为语法：

要实现您期望的行为，您需要执行以下操作：

setTeam(prevState => {
  // Object.assign would also work
  return {...prevState, manager: newValue, captain: newValue2 };
});

您可能还需要考虑使用 useReducer，因为您的状态有多个子值，useState 通常最好与单值状态一起使用。

您可以在此处阅读更多内容：https://reactjs.org/docs/hooks-reference.html#usestate

【讨论】：

【解决方案2】：

试试这个：

setTeam(currentState => ({
  ...currentState,
  manager: 'Thom',
  goalkeeper: 'Jan'
}))

【讨论】：