React报错：Rendered more hooks than during previous render问题解决

错误原因 #

你的CheckPermission函数因为使用了useSelector，属于自定义Hook，必须严格遵守React Hook的调用规则：

• Hook必须在组件的顶层作用域调用，不能放在循环、条件判断、嵌套函数（比如renderMenu）内部
• 每次渲染时，Hook的调用顺序必须完全一致

在菜单循环或renderMenu中调用它，会导致Hook调用顺序在不同渲染周期发生变化，触发报错。

正确解决方案 #

方案1：将权限校验逻辑改为普通函数，提前在顶层获取权限数据 #

1. 先在组件顶层通过useSelector获取用户权限：

// 组件顶层（函数最外层）
const userPermissions = useSelector(state => state.user.permissions);

2. 把CheckPermission改造成普通函数，接收用户权限和需校验的权限作为参数：

// 普通函数，不是Hook
function checkPermission(userPermissions, requiredPermission) {
  // 你的权限校验逻辑，比如判断用户权限是否包含目标权限
  return userPermissions.includes(requiredPermission);
}

3. 在renderMenu或菜单循环中直接调用这个普通函数：

function renderMenu(menu) {
  const hasPermission = checkPermission(userPermissions, menu.permission);
  return hasPermission ? <MenuItem>{menu.name}</MenuItem> : null;
}

// 菜单循环示例
const menuList = menus.map(menu => {
  const hasPermission = checkPermission(userPermissions, menu.permission);
  return hasPermission ? <MenuItem key={menu.id}>{menu.name}</MenuItem> : null;
});

方案2：封装返回校验函数的自定义Hook #

如果需要复用权限校验逻辑，可以封装一个自定义Hook，它在顶层调用useSelector，然后返回一个可在循环/嵌套函数中使用的普通校验函数：

// 自定义Hook，在组件顶层调用
function usePermissionChecker() {
  const userPermissions = useSelector(state => state.user.permissions);
  
  // 返回一个普通函数，用于后续校验
  return (requiredPermission) => {
    return userPermissions.includes(requiredPermission);
  };
}

在组件中使用：

// 组件顶层调用Hook，拿到校验函数
const checkPermission = usePermissionChecker();

// 在renderMenu或循环中调用普通函数
function renderMenu(menu) {
  const hasPermission = checkPermission(menu.permission);
  return hasPermission ? <MenuItem>{menu.name}</MenuItem> : null;
}

关键注意点 #

• 所有自定义Hook（包含useSelector、useState等内置Hook的函数）必须在组件顶层调用，不能出现在任何可能改变调用顺序的代码块中
• 若需要在循环、条件、嵌套函数中处理逻辑，务必将Hook的调用移到组件顶层，再把获取到的数据传给普通函数执行具体逻辑

内容的提问来源于stack exchange，提问作者Batgerel Enkhbat