javascript - 使用 React Hooks 根据之前的状态更改状态

Question

我正在看一个教程，一会儿他做了这个:

export default function Editor(props) {
  const [open, setOpen] = useState(true);

  return (
    <div className={`container ${open ? "" : "collapsed"}`}>
       <button onClick={() => setOpen((prevOpen) => !prevOpen)}>O/C</button>
    </div>
  );
}

我的问题是:为什么会这样

<button onClick={() => setOpen((prevOpen) => !prevOpen)}>O/C</button>

不是

<button onClick={() => setOpen(!open)}>O/C</button>

我都试过了，它们似乎都有效。

Answer 1

因为open实际上可能不是之前的状态。在您的代码中是这样，但在更复杂的组件中，可能会有多段代码设置状态。如果这些几乎同时发生，React 可能会将它们分批处理并一次性全部应用。

通常，这些代码片段位于组件的不同部分，因此很难被发现。但出于演示目的，我会将它们放在一起:

onClick={() => {
  setOpen(!open)
  setOpen(!open)
})

通过上面的代码，我们要求 React 将状态设置为 false，然后我们再次要求 React 将状态设置为 false。最终结果是它是假的。这可能不是我们想要的:如果我们切换状态两次，可能是因为我们希望它返回到原始状态。

onClick={() => {
  setOpen((prevOpen) => !prevOpen)
  setOpen((prevOpen) => !prevOpen)
})

此代码将其设置为false，然后将其设置为true。每个函数都会传入最新的值，即使该值与闭包中 open 的值不同。