标题重写为：类型错误：isOpen不是一个可调用的函数-PHP中文网问答

我试图将我的基于类的组件转换为基于函数的组件，这是我在学习REACT时写的一些时间，但在转换过程中，我遇到了一个错误，即isOpen不是一个函数，我有点不明白，因为我将其定义为一个状态并在handleToggle()中调用，然后在组件的logo处调用它。

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>
    );
  }

将非常感谢任何建议。

const [isOpen, setIsOpen] = useState(false); // <= 将其最初设置为 false const handleToggle = () => { setIsOpen(!isOpen); // <= 当它为 false 时，将 isOpen 设置为 true，当它为 true 时，将 isOpen 设置为 false };

全部回复(1)

P粉9519143812023-09-02 12:24:18 1楼

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

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

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

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

赞 +0

添加回复