标题重写为：类型错误：isOpen不是一个可调用的函数
<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>
<ul
className={isOpen ? "nav-links show-nav" : "nav-links"}
>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/rooms">Rooms</Link>
</li>
</ul>
<Badge badgeContent={4} color="primary"
id="basic-button"
aria-controls={open ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
onClick={handleClick}
>
<i className="fa-solid fa-cart-shopping text-light"
style={{ fontSize: 25, cursor: "pointer" }}
></i>
</Badge>
</div>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button',
}}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</Menu>
</nav>
);
}</pre>
<p>将非常感谢任何建议。</p>
1
902
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
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中。