使用 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值不同。

Answer 2

當你想更新依賴於前一個狀態的狀態時，你需要像<button onClick={() => setOpen((prevOpen) => !prevOpen)}>O/C</button>一樣調用 setState 。 這是設置狀態的重要規則。