在状态值之间切换 - 切换功能

Question

在我的 React 应用程序中，我有一个功能组件并且想要在状态值之间切换。我的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>
  )

}

正如 cmets 中指出的，toggleNav 是不必要的：

const navBar = () => {

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


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

}