タイトルは次のように書き換えられました: TypeError: isOpen は呼び出し可能な関数ではありません
<p>クラスベースのコンポーネントを関数ベースのコンポーネントに変換しようとしています。これは REACT の学習中に書いたものですが、変換中に isOpen は関数ではないというエラーが発生しました。これを状態として定義し、handleToggle() で呼び出してから、コンポーネントのロゴで呼び出したので、少し混乱しました。 </p>
<pre class="brush:php;toolbar:false;">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() );
};
戻る （
<nav className="navbar">
<div className="nav-center">
<div className="nav-header">
<リンク先="/">
<img src={logo} alt="ビーチ リゾート" />
</リンク>
<ボタン
type=「ボタン」
className="nav-btn"
onClick={ハンドルトグル}
>
<FaAlignRight className="nav-icon" />
</ボタン>
</div>
- ; <Link to="/">ホーム</Link> </li>
- ; <リンク先="/rooms">部屋</Link> </li> </ul> <バッジバッジコンテンツ={4} カラー="プライマリ" id="基本ボタン" aria-controls={開く? '基本メニュー' : 未定義} aria-haspopup="true" aria-expanded={開く? 'true' : 未定義} onClick={ハンドルクリック} > <i className="fa-solid fa-cart-shopping text-light" style={{ fontSize: 25、カーソル: "ポインタ" }} ></i> </バッジ> </div> <メニュー id="基本メニュー" アンカーEl={アンカーEl} 開く={開く} onClose={ハンドルクローズ} MenuListProps={{ 'aria-labeledby': '基本ボタン', }} > <MenuItem onClick={handleClose}>プロファイル</MenuItem> <MenuItem onClick={handleClose}>私のアカウント</MenuItem> <MenuItem onClick={handleClose}>ログアウト</MenuItem> </メニュー> </ナビ> ); }</pre> </p>どのような約束も非常に重要です。
