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

在我的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>
  )

}

const导航栏=（）=>{
//设置初始状态
常量[isMenuOpen]=useState（false）；
//切换变量
让toggleNav=（）=>{
isMenuOpen=！isMenuOpen；
}
返回(
切换
)
}

由

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

，更好的是为什么要用

let

来定义它？这是极其浪费的编程。只要

{e=>setMenuOpen（！isMenuOpen）}

就足够了只要修改一下他的例子。我不会声明

toggleNav

either@r3wt因为我只使用一次，它被认为是浪费吗？因此应该使用内联吗？我不认为这是一个性能问题。在这样一个小的组件中，声明变量所花费的时间可以忽略不计

const navBar = () => {

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


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

}