在狀態值之間切換-切換功能

Question

在我的React App中，我有一個功能組件，想在狀態值之間切換。 我的toggleNav函數似乎無法正常工作。 我試圖將isMenuOpen設置為isMenuOpen不是，但是我的語法似乎不正確。

我有以下代碼：

const navBar = () => {

  //set initial state
  const [isMenuOpen] = useState(false);

  // toggle variable
  let toggleNav = () => {
    isMenuOpen = !isMenuOpen;
  }

  return (
    <button onClick={toggleNav}>Toggle</button>
  )

}

Answer 1

useState返回的第二個元素是setter 。 您不能僅僅改變狀態。 嘗試這個：

const navBar = () => {

  //set initial state
  const [isMenuOpen, setMenuOpen] = useState(false);

  // toggle variable
  let toggleNav = () => {
    setMenuOpen(!isMenuOpen)
  }

  return (
    <button onClick={toggleNav}>Toggle</button>
  )

}

如評論中所指出的， toggleNav是不必要的：

const navBar = () => {

  //set initial state
  const [isMenuOpen, setMenuOpen] = useState(false);


  return (
    <button onClick={() => setMenuOpen(!isMenuOpen)}>Toggle</button>
  )

}