React useEffect 渲染两次答案

【问题标题】：React useEffect renders twiceReact useEffect 渲染两次
【发布时间】：2022-11-26 14:22:52
【问题描述】：

我知道 React 在使用像这样的钩子时会渲染两次：

const [userPermissions, setUserPermissions] = useState();

//Use GET from myService to save to state
useEffect(() => {
  myService.canUserAccess(userId)
  .then(({userPermissions}) => setUserPermissions(userPermissions));
});

鉴于我的应用程序的逻辑，这是一个巨大的问题，因为我需要检查用户权限并在权限不正确时重定向用户：

useEffect(() => {
  console.log(userPermissions); //This is the output
  if(!userPermissions){ redirect(...)}
},[userPermissions, redirect]);

我一直在调试这个，似乎有第一个“渲染”：输出这个：

undefined

紧接着：

{ userPermissions: {...} }

按照我的应用程序的逻辑，当 userPermissions 的状态首次设置为未定义时，它将被重定向。我需要获取此 userPermissions 对象，但 React 的“双重渲染”阻止我按需要执行逻辑。

有没有办法在不触发“双重渲染”的情况下“加载”userPermissions 对象并将其设置为 useState 挂钩？

【问题讨论】：

标签： reactjs react-hooks hook

【解决方案1】：

您可以存储另一个状态以了解它是否已加载吗？

const [gettingUserPermissions, setGettingUserPermissions] = useState(true)

useEffect(() => {
  if(gettingUserPermissions){
    return; // wait until fully loaded
  }
  console.log(userPermissions); //This is the output
  if(!userPermissions){ redirect(...)}
},[gettingUserPermissions, userPermissions, redirect]);

不确定您是如何调用获取用户权限的初始加载的，但我确定可以对此进行调整。

【讨论】：