더 많은 후크 문제 해결: 쉬운 가이드

Question

내 프로젝트의 후크에 몇 가지 문제가 있습니다. 사용자의 권한을 확인하고 true 또는 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 내보내기;

然后我侧边栏组件中使用它

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>
  );
};

但是它抛了"오류: 이전 렌더링보다 더 많은 후크를 렌더링했습니다."

저는 循环中使사용 checkPermission函数,结果是一样的입니다.

Answer 1

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

으아악