タイトルは次のように書き換えられました: 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>どのような約束も非常に重要です。
