Tajuk ditulis semula kepada: TypeError: isOpen bukan fungsi boleh panggil

Question

Saya cuba menukar komponen berasaskan kelas saya kepada komponen berasaskan fungsi, yang saya tulis beberapa ketika semasa belajar REACT, tetapi semasa penukaran, saya mendapat ralat yang isOpen bukan fungsi, saya sedikit keliru kerana saya mentakrifkannya sebagai keadaan dan memanggilnya dalam handleToggle() dan kemudian memanggilnya pada logo komponen.

import React, { useState, useEffect } daripada "react";
import logo daripada "../images/logo.svg";
import { FaAlignRight } daripada "react-icons/fa";
import { Pautan } daripada "react-router-dom";
import Lencana daripada '@mui/bahan/Lencana';
import Menu daripada '@mui/material/Menu';
import MenuItem daripada '@mui/material/MenuItem';

eksport fungsi lalai Navbar(){

  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);
  const handleClick = (acara) =>
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () =>
    setAnchorEl(null);
  };
   
  const [isOpen, setIsOpen] = useState(null);
  
 useEffect(() =>{
  handleToggle();
 });
  
  // negeri = {
  // isOpen: false,
  // };
  const handleTogol = () =>
    setIsOpen(isOpen() );
  };



    kembali (
      <nav className="navbar">
        <div className="nav-center">
          <div className="nav-header">
            <Pautan ke="/">
              <img src={logo} alt="Pusat Peranginan Pantai"
            </Pautan>
            <butang
              type="butang"
              className="nav-btn"
              onClick={handleToggle}
            >
              <FaAlignRight className="nav-icon"
            </butang>
          </div>
          <ul
            className={isOpen ? "pautan nav show-nav" : "pautan navigasi"}
          >
            <li>
              <Pautan ke="/">Laman Utama</Pautan>
            </li>
            <li>
              <Pautan ke="/bilik">Bilik</Pautan>
            </li>
          </ul>
          <Badge badgeContent={4} color="utama" 
              id="butang-asas"
              aria-controls={open ? 'basic-menu' : tidak ditentukan}
              aria-haspopup="benar"
              aria-expanded={open ? 'benar' : tidak ditentukan}
              onClick={handleClick}
          >
            <i className="fa-solid fa-cart-shopping text-light"
              style={{ fontSaiz: 25, kursor: "penunjuk" }}
            ></i>
          </Lencana>
        </div>
        <Menu
        id="menu asas"
        anchorEl={anchorEl}
        buka={open}
        onClose={handleClose}
        MenuListProps={{
          'aria-labelledby': 'basic-button',
        }}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>Akaun saya</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
      </nav>
    );
  }

将非常感谢任何建议。

Answer 1

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

Apabila anda menulis nilai const handleToggle = () => { setIsOpen(isOpen() ) } 时，你试图调用一个 null, ia tidak mungkin kerana ia bukan fungsi. Inilah yang diberitahu oleh mesej ralat kepada anda.

Jika anda ingin bertukar isOpen 的值，你应该将 isOpen 声明为一个布尔值，并使用 isOpen 的相反值来调用 setIsOpen:

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

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

Namun, jika anda berada dalam useEffect 中调用 handleToggle，就像你正在做的那样，它将在每次重新渲染时被调用，这可能不是你想要的。你很可能希望在响应用户交互时调用它 - 例如在响应 HTML 元素事件（如 onClick）时。否则，你应该重构你的代码，添加必要的依赖项到 useEffect tanpa tatasusunan kebergantungan.