Title rewritten to: TypeError: isOpen is not a callable function

Question

I'm trying to convert my class-based component to a function-based component, which I wrote some time while learning REACT, but during the conversion, I got an error that isOpen is not a function, I'm a little confused because I defined it as a state and called it in handleToggle() and then called it at the component's 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>
    );
  }

将非常感谢任何建议。

Answer 1

useState Returns an array containing two elements: a value stored in the state and a function used to update it. If you call const [isOpen, setIsOpen] = useState(null), isOpen is your value (initially set to null), setIsOpen is a function used to update it.

When you write const handleToggle = () => { setIsOpen(isOpen() ) } you are trying to call a null value, which is not possible because It's not a function. This is what the error message tells you.

If you want to toggle the value of isOpen, you should declare isOpen as a boolean and call ## with the opposite value of isOpen #setIsOpen：

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

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

However, if you call

handleToggle in a useEffect without a dependency array, as you are doing, it will be called on every re-render, which may Not what you want. You'll most likely want to call it in response to user interaction - for example in response to an HTML element event such as onClick. Otherwise, you should refactor your code to add necessary dependencies to useEffect.