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

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>
  )

}