<p>제가 REACT를 배우면서 언젠가 작성했던 클래스 기반 컴포넌트를 함수 기반 컴포넌트로 변환하려고 하는데, 변환 중에 isOpen이 함수가 아니라는 오류가 뜹니다. 상태로 정의하고 handlerToggle()에서 호출한 다음 구성 요소 로고에서 호출했기 때문에 약간 혼란스러웠습니다. </p>
<pre class="brush:php;toolbar:false;">import React, { useState, useEffect } from "react"
"../images/logo.svg"에서 로고 가져오기;;
"react-icons/fa"에서 { FaAlignRight } 가져오기;;
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 handlerClick = (이벤트) =>
setAnchorEl(event.currentTarget);
};
const handlerClose = () =>
setAnchorEl(null);
};
const [isOpen, setIsOpen] = useState(null);
useEffect(() =>{
핸들토글();
});
// 상태 = {
// isOpen: 거짓,
// };
const handlerToggle = () =>
setIsOpen(isOpen() );
};
반품 (
<nav className="navbar">
<div className="nav-center">
<div className="nav-header">
<링크="/">
<img src={logo} alt="해변 리조트"
</링크>
<버튼
유형="버튼"
className="nav-btn"
onClick={handleToggle}
>
<FaAlignRight className="nav-icon"
</버튼>
</div>
<링크="/">홈</Link>
</li>
-
<링크="/rooms">방</Link>
</li>
</ul>
<배지 BadgeContent={4} color="기본"
id="기본버튼"
aria-controls={열기 ? '기본 메뉴': 정의되지 않음}
aria-haspopup="true"
아리아-확장={열기 ? '참': 정의되지 않음}
onClick={handleClick}
>
<i className="fa-solid fa-cart-shopping text-light"
style={{ 글꼴 크기: 25, 커서: "포인터" }}
></i>
</배지>
</div>
<메뉴
id="기본 메뉴"
앵커엘={앵커엘}
열다={열다}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': '기본 버튼',
}}
>
<MenuItem onClick={handleClose}>프로필</MenuItem>
<MenuItem onClick={handleClose}>내 계정</MenuItem>
<MenuItem onClick={handleClose}>로그아웃</MenuItem>
</메뉴>
</nav>
);
}</pre>
<p>将不常感谢任何建议。</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
useState返回一个包含两个元素的数组：一个存储在状态中的值和一个用于更新它的函数。如果你调用const [isOpen, setIsOpen] = useState(null)，isOpen是你的值（最初设置为null），setIsOpen업데이트하는 데 사용되는 기능입니다.const handleToggle = () => { setIsOpen(isOpen() ) }时，你试图调用一个null값을 쓰면 함수가 아니기 때문에 불가능합니다. 이것이 오류 메시지가 알려주는 것입니다.전환하려는 경우
으아악isOpen的值，你应该将isOpen声明为一个布尔值，并使用isOpen的相反值来调用setIsOpen:그러나 의존성 배열 없이
useEffect中调用handleToggle，就像你正在做的那样，它将在每次重新渲染时被调用，这可能不是你想要的。你很可能希望在响应用户交互时调用它 - 例如在响应 HTML 元素事件（如onClick）时。否则，你应该重构你的代码，添加必要的依赖项到useEffect에 있는 경우.