Titel umgeschrieben in: TypeError: isOpen ist keine aufrufbare Funktion

Question

Ich versuche, meine klassenbasierte Komponente in eine funktionsbasierte Komponente umzuwandeln, die ich vor einiger Zeit geschrieben habe, als ich REACT lernte, aber während der Konvertierung habe ich die Fehlermeldung erhalten, dass isOpen keine Funktion ist. Ich bin etwas verwirrt, weil ich es als Zustand definiert und in handleToggle() aufgerufen habe und es dann beim Logo der Komponente aufgerufen habe.

import React, { useState, useEffect } from "react";
Logo importieren aus „../images/logo.svg“;
import { FaAlignRight } aus "react-icons/fa";
import { Link } from "react-router-dom";
Badge aus „@mui/material/Badge“ importieren;
Menü aus '@mui/material/Menu' importieren;
MenuItem aus '@mui/material/MenuItem' importieren;

Exportieren Sie die Standardfunktion 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();
 });
  
  // Zustand = {
  // isOpen: false,
  // };
  const handleToggle = () =>
    setIsOpen(isOpen() );
  };



    zurückkehren (
      <nav className="navbar">
        <div className="nav-center">
          <div className="nav-header">
            <Link zu="/">
              <img src={logo} alt="Beach Resort"
            </Link>
            <-Taste
              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="primär" 
              id="basic-button"
              aria-controls={open ? 'Basismenü': undefiniert}
              aria-haspopup="true"
              aria-expanded={open ? 'wahr': undefiniert}
              onClick={handleClick}
          >
            <i className="fa-solid fa-cart-shopping text-light"
              style={{ Schriftartgröße: 25, Cursor: "Zeiger" }}
            ></i>
          </Badge>
        </div>
        <Menü
        id="Basismenü"
        AnchorEl={AnchorEl}
        open={open}
        onClose={handleClose}
        MenuListProps={{
          'aria-labelledby': 'basic-button',
        }}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>Mein Konto</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menü>
      </nav>
    );
  }

将非常感谢任何建议.

Answer 1

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 中。