<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>
</徽章>
<菜单
id="基本菜单"
锚El={锚El}
打开={打开}
onClose={handleClose}
菜单列表属性={{
'aria-labelledby': '基本按钮',
}}
>
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中。