더 많은 후크 문제 해결: 쉬운 가이드
P粉883278265
P粉883278265 2023-08-14 13:19:01
0
1
432
<p>내 프로젝트의 후크에 몇 가지 문제가 있습니다. 사용자의 권한을 확인하고 true 또는 false를 반환하는 함수입니다.</p> <pre class="brush:php;toolbar:false;">"react-redux"에서 { useSelector } 가져오기; const CheckPermission = (module_key,permission_key) => { const { 사용자 } = useSelector((상태) => ({ 사용자: state.auth.user, })); const rolePermissions = user?.role?.role_permissions ?? []; const return_value = !!rolePermissions.find( (p_list) => p_list.module?.key === module_key && p_list.permission?.key === 허가_키 ); return_value를 반환합니다. }; 기본 CheckPermission 내보내기;</pre> <p>然后我侧边栏组件中使用它</p> <pre class="brush:php;toolbar:false;">const renderMenu = (메뉴, 키) => { if (!CheckPermission(menu.moduleKey, menu.permissionKey)) { null을 반환; } 반품 ( <도구 설명 제목={menu.name} 배치="오른쪽" 키={키}> <NavLink activeClassName={styles.active} 정확한 클래스이름={styles.item} to={menu.path} > <span className={styles.iconBox}>{menu.icon}</span> <span className={styles.itemText}> {menu.name}</span> </NavLink> </도구 설명> ); }; 기본값 내보내기({collapse, onCollapse, isAdmin }) => { const { 사용자 } = useSelector((상태) => ({ 사용자: state.auth.user, })); 반품 ( <레이아웃.사이더 테마="빛" className={classnames(styles.sider,collapse ? styles.collapsed : "")} 접을 수 있는 접혀짐={접어짐} onCollapse={onCollapse} 너비={축소? 64 : 264} onBreakpoint={() => {}} 중단점="xl" 스타일={{ 오버플로: "자동", 높이: "100vh", 위치: "고정", 왼쪽: 0, 상단: 0, paddingTop: "50px", }} > <div className={styles.action}> {사용자 && user.read_only ? menus.map((메뉴, i) => { if (menu.name === "Харилцагч") { return renderMenu(메뉴, i); } 또 다른 { 반품 ( 메뉴 && menu.children && // eslint-disable-next-line 배열-콜백-반환 menu.children.map((submenu, j) => { if (submenu.name === "QR данс") { 반품 ( <div key={i} className={styles.parentnav}> {renderMenu(하위 메뉴, j)} </div> ); } }) ); } }) : menus.map((메뉴, i) => { if (메뉴.경로) { return renderMenu(메뉴, i); } 또 다른 { 반품 ( <div key={i} className={styles.parentnav}> {메뉴.이름 ? ( <div className={`${styles.navlabel} ${styles.partentText}`} > {메뉴.이름} </div> ) : 없는} {menu.children.map((submenu, j) => { if (!submenu.path)는 null을 반환합니다. if (isAdmin) { return renderMenu(하위 메뉴, j); } 또 다른 { null을 반환; } })} </div> ); } })} </div> </Layout.Sider> ); };</pre> <p>但是它抛了"오류: 이전 렌더링보다 더 많은 후크를 렌더링했습니다." <p>저는 循环中使사용 checkPermission函数,结果是一样的입니다.</p>
P粉883278265
P粉883278265

모든 응답(1)
P粉824889650

"오류: 마지막 렌더링보다 더 많은 후크를 사용한 렌더링"은 일반적으로 후크 규칙을 위반하는 방식으로 React 후크(예: useSelector)를 사용할 때 발생합니다. 규칙에 따르면 후크는 항상 루프, 조건 또는 중첩 함수 내가 아닌 기능 구성 요소의 최상위 수준에서 호출되어야 합니다. 귀하의 코드에서는 루프 및 조건부에서 CheckPermission 함수를 사용하는 것 같습니다.

으아악
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿