제목이 다음으로 변경됨: TypeError: isOpen은 호출 가능한 함수가 아닙니다.
<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>
