<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>どのような約束も非常に重要です。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
useState状態に格納されている値とその更新に使用される関数の 2 つの要素を含む配列を返します。const [isOpen, setIsOpen] = useState(null)を呼び出す場合、isOpenは値 (最初はnullに設定されます)、setIsOpenはそれを更新するために使用される関数です。const handleToggle = () => { setIsOpen(isOpen() ) }
と書くと、null値を呼び出そうとしていますが、これは不可能です。機能。これがエラー メッセージの内容です。isOpen
useEffectの値を切り替えたい場合は、isOpenをブール値として宣言し、反対の値isOpen#setIsOpen を指定して ## を呼び出す必要があります。：リーリーただし、今のように、依存関係配列を使用せずにで
handleToggleを呼び出すと、再レンダリングのたびに呼び出されるため、希望どおりではない可能性があります。 。ほとんどの場合、ユーザー インタラクションに応答して、たとえばonClickなどの HTML 要素イベントに応答してこの関数を呼び出すことができます。それ以外の場合は、コードをリファクタリングして、必要な依存関係をuseEffectに追加する必要があります。