如何使用 useState hook 一次更新多个状态？

Question

在功能组件中，我们使用 useState 而不是 this.setState 类组件。但据我所知，使用 useState 一次只能设置一个状态，而 setState 允许您一次设置多个状态（例如 this.setState({a1: true, a2: false})）。

这是否意味着如果你想使用 useState 同时设置两个状态，你会得到两次重新渲染，这是低效的？有办法解决这个问题吗？

Answer 1

AFAIK 是对的，但您也可以认为在大多数情况下，您只是按照它们相关的方式对状态进行分组，而不是拥有大量 this.state 具有一堆属性但彼此不相关，这也在某些方面很糟糕

所以通常你不会每次都更新两个状态，如果你这样做，很可能你想将这些状态混合成一个。

所以假设你有这两种状态：

const [state1, setState1] = useState(...);
const [state2, setState2] = useState(...);

你总是在你的 onChange 函数（或其他）中做：

const onChange = () => {
  setState1(...);
  setState2(...);
}

你应该像这样将它们混合成一个状态：

const [state, setState] = useState({ state1: ..., state: ...}); // or it could be other thing than an object...

How can I update multiple states at a time with useState hook?