タイトルは次のように書き換えられました: TypeError: isOpen は呼び出し可能な関数ではありません-PHP中国語ネットワークQ&A

クラスベースのコンポーネントを関数ベースのコンポーネントに変換しようとしています。これは REACT の学習中に書いたものですが、変換中に isOpen は関数ではないというエラーが発生しました。これを状態として定義し、handleToggle() で呼び出してから、コンポーネントのロゴで呼び出したので、少し混乱しました。

import React, { useState, useEffect } from "react"; 「../images/logo.svg」からロゴをインポートします; import { FaAlignRight } から "react-icons/fa"; import { Link } from "react-router-dom"; 「@mui/material/Badge」からバッジをインポートします。 '@mui/material/Menu' からメニューをインポートします。 '@mui/material/MenuItem' から MenuItem をインポートします。 デフォルト関数をエクスポート Navbar(){ const [anchorEl, setAnchorEl] = useState(null); const open = Boolean(anchorEl); const handleClick = (イベント) => { setAnchorEl(event.currentTarget); }; const handleClose = () => { setAnchorEl(null); }; const [isOpen, setIsOpen] = useState(null); useEffect(() =>{ ハンドルトグル(); }); // 状態 = { // isOpen: false, // }; const handleToggle = () => { setIsOpen(isOpen() ); }; 戻る （    <リンク先="/">  
      <ボタン type="「ボタン」" classname="nav-btn" onclick="{ハンドルトグル}">
         
       
        ; ホーム 
        ; <リンク先="/rooms">部屋 
 
 <バッジバッジコンテンツ={4} カラー="プライマリ" id="基本ボタン" aria-controls={開く? '基本メニュー' : 未定義} aria-haspopup="true" aria-expanded={開く? 'true' : 未定義} onClick={ハンドルクリック} >   
         <メニュー id="基本メニュー" アンカーel="{アンカーEl}" 開く="{開く}" onclose="{ハンドルクローズ}" menulistprops="{{" 'aria-labeledby': '基本ボタン', }}>
          プロファイル 私のアカウント ログアウト   ); }

どのような約束も非常に重要です。

全員に返信 (1)

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

useState状態に格納されている値とその更新に使用される関数の 2 つの要素を含む配列を返します。const [isOpen, setIsOpen] = useState(null)を呼び出す場合、isOpenは値 (最初はnullに設定されます)、setIsOpenはそれを更新するために使用される関数です。

const handleToggle = () => { setIsOpen(isOpen() ) }と書くと、null値を呼び出そうとしていますが、これは不可能です。機能。これがエラーメッセージの内容です。

isOpenの値を切り替えたい場合は、isOpenをブール値として宣言し、反対の値isOpen#setIsOpen を指定して ## を呼び出す必要があります。：リーリーただし、今のように、依存関係配列を使用せずに

useEffect

でhandleToggleを呼び出すと、再レンダリングのたびに呼び出されるため、希望どおりではない可能性があります。。ほとんどの場合、ユーザーインタラクションに応答して、たとえばonClickなどの HTML 要素イベントに応答してこの関数を呼び出すことができます。それ以外の場合は、コードをリファクタリングして、必要な依存関係をuseEffectに追加する必要があります。