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的值。

Answer 2

当您要更新取决于先前状态的状态时，则需要像<button onClick={() => setOpen((prevOpen) => !prevOpen)}>O/C</button>这样调用setState。这是设置状态的重要规则。

使用React Hooks根据先前的状态更改状态

2 个答案: