标题重写为：类型错误：isOpen不是一个可调用的函数

Question

<p>我试图将我的基于类的组件转换为基于函数的组件，这是我在学习REACT时写的一些时间，但在转换过程中，我遇到了一个错误，即isOpen不是一个函数，我有点不明白，因为我将其定义为一个状态并在handleToggle()中调用，然后在组件的logo处调用它。</p> <pre class="brush:php;toolbar:false;">import React, { useState, useEffect } from "react"; import logo from "../images/logo.svg"; import { FaAlignRight } from "react-icons/fa"; import { Link } from "react-router-dom"; import Badge from '@mui/material/Badge'; import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; export default function Navbar(){ const [anchorEl, setAnchorEl] = useState(null); const open = Boolean(anchorEl); const handleClick = (event) => { setAnchorEl(event.currentTarget); }; const handleClose = () => { setAnchorEl(null); }; const [isOpen, setIsOpen] = useState(null); useEffect(() =>{ handleToggle(); }); // state = { // isOpen: false, // }; const handleToggle = () => { setIsOpen(isOpen() ); }; return ( <nav className="navbar"> <div className="nav-center"> <div className="nav-header"> <Link to="/"> <img src={logo} alt="Beach Resort" /> </Link> <button type="button" className="nav-btn" onClick={handleToggle} > <FaAlignRight className="nav-icon" /> </button> </div>

类名={isOpen ? “导航链接显示导航” : “导航链接”} > <li> <链接到=“/”>主页 </li> <li> <链接到=“/房间”>房间 </li> </ul> <徽章徽章内容={4}颜色=“主要” id="基本按钮" aria-controls={打开？ '基本菜单'：未定义} aria-haspopup=“真” aria-expanded={打开？ “真”：未定义} onClick={handleClick} > <i className=“fa-solid fa-cart-shopping text-light” style={{ fontSize: 25, 光标: “指针”; }} ></i> </徽章>

Answer 1

useState 返回一个包含两个元素的数组：一个存储在状态中的值和一个用于更新它的函数。如果你调用 const [isOpen, setIsOpen] = useState(null)，isOpen 是你的值（最初设置为 null），setIsOpen 是一个用于更新它的函数。

当你写 const handleToggle = () => { setIsOpen(isOpen() ) } 时，你试图调用一个 null 值，这是不可能的，因为它不是一个函数。这就是错误信息告诉你的。

如果你想要切换 isOpen 的值，你应该将 isOpen 声明为一个布尔值，并使用 isOpen 的相反值来调用 setIsOpen：

const [isOpen, setIsOpen] = useState(false);  // <= 将其最初设置为 false

const handleToggle = () => {
  setIsOpen(!isOpen); // <= 当它为 false 时，将 isOpen 设置为 true，当它为 true 时，将 isOpen 设置为 false
};

然而，如果你在没有依赖数组的 useEffect 中调用 handleToggle，就像你正在做的那样，它将在每次重新渲染时被调用，这可能不是你想要的。你很可能希望在响应用户交互时调用它 - 例如在响应 HTML 元素事件（如 onClick）时。否则，你应该重构你的代码，添加必要的依赖项到 useEffect 中。