더 많은 후크 문제 해결: 쉬운 가이드
P粉883278265
2023-08-14 13:19:01
<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>
"오류: 마지막 렌더링보다 더 많은 후크를 사용한 렌더링"은 일반적으로 후크 규칙을 위반하는 방식으로 React 후크(예: useSelector)를 사용할 때 발생합니다. 규칙에 따르면 후크는 항상 루프, 조건 또는 중첩 함수 내가 아닌 기능 구성 요소의 최상위 수준에서 호출되어야 합니다. 귀하의 코드에서는 루프 및 조건부에서 CheckPermission 함수를 사용하는 것 같습니다.
으아악