React中useEffect触发两次渲染，如何避免权限校验时错误重定向？

问题场景 #

使用以下Hook时，React会触发两次渲染：

const [userPermissions, setUserPermissions] = useState();

// 通过myService的GET请求将权限保存到状态
useEffect(() => {
  myService.canUserAccess(userId)
  .then(({userPermissions}) => setUserPermissions(userPermissions));
});

权限检查逻辑会在userPermissions为undefined时触发重定向，导致请求还未返回就执行了错误的重定向：

useEffect(() => {
  console.log(userPermissions); // 输出结果
  if(!userPermissions){ redirect(...)}
},[userPermissions, redirect]);

调试输出：
第一次渲染输出：

undefined

第二次渲染输出：

{ userPermissions: {...} }

解决方案 #

1. 区分“未加载”和“无权限”状态

初始状态不用undefined，改用专门标记（如null）表示权限正在加载，避免把加载状态误判为无权限：

// 初始状态设为null，表示加载中
const [userPermissions, setUserPermissions] = useState(null);

useEffect(() => {
  myService.canUserAccess(userId)
  .then(({userPermissions}) => setUserPermissions(userPermissions));
}, [userId]); // 增加userId依赖，避免重复请求

useEffect(() => {
  // 仅当权限加载完成且确实无权限时重定向
  if(userPermissions !== null && !userPermissions){ 
    redirect(...)
  }
},[userPermissions, redirect]);

2. 单独维护加载状态变量

新增isLoading状态，明确区分加载中和加载完成的阶段：

const [userPermissions, setUserPermissions] = useState();
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  myService.canUserAccess(userId)
  .then(({userPermissions}) => {
    setUserPermissions(userPermissions);
    setIsLoading(false);
  })
  .catch(() => {
    // 请求失败时标记为无权限并结束加载
    setUserPermissions(false);
    setIsLoading(false);
  });
}, [userId]);

useEffect(() => {
  // 加载完成后再执行权限判断
  if(!isLoading && !userPermissions){
    redirect(...)
  }
},[userPermissions, isLoading, redirect]);

3. 优化权限判断逻辑

如果不想新增状态，可直接通过逻辑判断忽略undefined的加载状态：

useEffect(() => {
  // 仅当权限存在且确实为空（无权限）时重定向
  if(userPermissions !== undefined && Object.keys(userPermissions).length === 0){
    redirect(...)
  }
},[userPermissions, redirect]);

关键说明 #

React的两次渲染是正常行为：第一次为初始渲染（状态为初始值），第二次是请求完成更新状态触发的渲染。问题核心不是避免两次渲染，而是不要把“加载中”状态当成“无权限”处理，通过明确状态语义或增加加载标记即可解决问题。

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