标题重写为:类型错误: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>
useState
返回一个包含两个元素的数组:一个存储在状态中的值和一个用于更新它的函数。如果你调用const [isOpen, setIsOpen] = useState(null)
,isOpen
是你的值(最初设置为null
),setIsOpen
是一个用于更新它的函数。当你写
const handleToggle = () => { setIsOpen(isOpen() ) }
时,你试图调用一个null
值,这是不可能的,因为它不是一个函数。这就是错误信息告诉你的。如果你想要切换
isOpen
的值,你应该将isOpen
声明为一个布尔值,并使用isOpen
的相反值来调用setIsOpen
:然而,如果你在没有依赖数组的
useEffect
中调用handleToggle
,就像你正在做的那样,它将在每次重新渲染时被调用,这可能不是你想要的。你很可能希望在响应用户交互时调用它 - 例如在响应 HTML 元素事件(如onClick
)时。否则,你应该重构你的代码,添加必要的依赖项到useEffect
中。