Titre réécrit en : TypeError : isOpen n'est pas une fonction appelable

Question

J'essaie de convertir mon composant basé sur une classe en un composant basé sur une fonction, que j'ai écrit il y a quelque temps en apprenant REACT, mais lors de la conversion, j'ai eu une erreur indiquant que isOpen n'est pas une fonction, je' Je suis un peu confus car je l'ai défini comme un état et je l'ai appelé dans handleToggle(), puis je l'ai appelé au logo du composant.

importer React, { useState, useEffect } depuis "react" ;
importer le logo depuis "../images/logo.svg" ;
importer { FaAlignRight } depuis "react-icons/fa" ;
importer {Lien} depuis "react-router-dom" ;
importer le badge depuis '@mui/material/Badge' ;
importer le menu depuis '@mui/material/Menu' ;
importer MenuItem depuis '@mui/material/MenuItem' ;

exporter la fonction par défaut Navbar(){

  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);
  const handleClick = (événement) =>
    setAnchorEl(event.currentTarget);
  } ;
  const handleFermer = () =>
    setAnchorEl(null);
  } ;
   
  const [isOpen, setIsOpen] = useState(null);
  
 useEffect(() =>{
  handleToggle();
 });
  
  // état = {
  // estOuvert : faux,
  // };
  const handleToggle = () =>
    setIsOpen(isOpen() );
  } ;



    retour (
      

        

          

            
              
            
            
              
          
          

            

              Accueil
            ≪/li>
            

              Chambres
            ≪/li>
          
          
            ≪/i>
          
        

        
        Profil
        Mon compte
        Déconnexion
      
      

    );
  }
将非常感谢任何建议。

Answer 1

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

Quand vous écrivez const handleToggle = () => { setIsOpen(isOpen() ) } 时，你试图调用一个 null valeur, ce n'est pas possible car ce n'est pas une fonction. C'est ce que vous dit le message d'erreur.

Si vous souhaitez changer isOpen 的值，你应该将 isOpen 声明为一个布尔值，并使用 isOpen 的相反值来调用 setIsOpen :

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

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

Cependant, si vous êtes dans useEffect 中调用 handleToggle，就像你正在做的那样，它将在每次重新渲染时被调用，这可能不是你想要的。你很可能希望在响应用户交互时调用它 - 例如在响应 HTML 元素事件（如 onClick）时。否则，你应该重构你的代码，添加必要的依赖项到 useEffect sans tableau de dépendances.