reactjs 停止渲染，直到useEffect完成

lf5gs5x2 于 2023-03-17 发布在 React

关注(0)|答案(1)|浏览(120)

我正在设置默认访问级别
但这里的问题是，当在useEffect中更改访问级别时，页面是以默认访问级别呈现的，我如何保持页面的呈现直到使用效果完成？

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  const [role, setRole] = useState('candidate');
  const auth = nookies.get()["auth"];

  useEffect(() => {
    if (auth) {
      const parsedUser = JSON.parse(auth);
      const { role_id } = parsedUser as unknown as CookieInfo;
      if (role_id) {
        const current_user_role = roles.find((x) => x.id === role_id)?.name || 'Candidate';
        const aclRole = current_user_role.replace(' ', '').toLowerCase();
        console.log('aclRole', aclRole, role_id, current_user_role);
        setRole(aclRole);
      }
    }
  }, [auth, role])
  console.log('role', role);
  let userId = 0;

if (auth) {
  const parsedUser = JSON.parse(auth);
  userId = parsedUser?.id;
}
  // console.log('');

  return (
    <ThemeProvider theme={customTheme}>

我希望渲染停止，直到调用以下变量：

setRole(aclRole);

reactjs

来源：https://stackoverflow.com/questions/75762581/stop-render-until-useeffect-is-done

1条答案

按热度按时间

yyyllmsg1#

有一个加载状态，如果加载仍在进行，则返回null。这可能是一个附加状态：

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  const [loading, setLoading] = useState(true);
  const [role, setRole] = useState('candidate');
  // ...

  useEffect(() => {
    // ... load as before, ending with:
    setLoading(false);
  }, [auth, role]);

  // ...
  if (loading) {
    return null;
  }

  return (
     <ThemeProvider theme={customTheme}>

或者可能role状态就足够了，它只需要一些特殊的值来说明还没有使用它。null或undefined是常见的选择：

const [role, setRole] = useState<string | null>(null);
// ...
if (role === null) {
  return null;
}

return (
   <ThemeProvider theme={customTheme}>

赞(0）回复(0）举报 2023-03-17

我来回答

reactjs 停止渲染，直到useEffect完成

1条答案

相关问题

热门标签

最新问答