如何在 React JS 中渲染之前等待状态？

Posted 2023-04-14

【中文标题】如何在 React JS 中渲染之前等待状态？

【英文标题】：How to wait state before rendering in React JS?

【发布时间】：2020-12-12 07:16:42

【问题描述】：

我使用“React Context”将状态 user 传递给子组件。

问题：每次重新加载页面时，状态user 的值为空。这会导致页面在重定向到“/dashboard”之前短暂重定向到/login。这将阻止用户手动访问页面。

目标：如何在渲染前等待状态user？

App.js

function App() 
  const [user, setUser] = useState(null);
  useEffect(() => 
    firebase.auth().onAuthStateChanged((user) => 
      if (user) setUser(user);
      else setUser(null);
    );
  , []);
  return (
    <Router>
      <AuthDataContext.Provider value=user>
        <Layout>
          <Routes />
        </Layout>
      </AuthDataContext.Provider>
    </Router>
  );

路线

export const Routes = () => 
  const user = useContext(AuthDataContext);
  if (user) 
    return (
      <Switch>
        <Route path="/dashboard" component=Dashboard />
        <Route path="/list" component=List />
        <Redirect to="/dashboard" />
      </Switch>
    );
   else 
    return (
      <Switch>
        <Route path="/login" component=LogIn />
        <Route path="/register" component=Register />
        <Route path="/passwordreset" component=PasswordReset />
        <Redirect to="/login" />
      </Switch>
    );
  
;

身份验证数据

import React from "react";

export const AuthDataContext = React.createContext(null);

编辑：快速修复 应用.js

const [user, setUser] = useState("first");

路线

else if (user === "first") return null

【参考方案1】：

您可以有一个组件来启动 API 调用并在用户等待响应时呈现某种加载器。然后，如果用户通过身份验证，您可以呈现常规应用程序路由，如果没有 - 呈现 sign in、sign up 等的路由。

【讨论】：

我明白了，好主意。我应用了一个快速修复，现在状态 user 有 3 个可能的值 firebase user data, null, or first。如果我没记错的话，如果我添加加载栏，这会导致routes 有 3 个可能的返回？ ps：抱歉，我学的很慢，这是我接触 React 的第 4 天，大约 120 天的编程时间。

这和我的意思差不多。但是你的状态数据结构可以更准确一点，至少你可以存储一个用户本身，如果你请求它，它可能会丢失，以及请求状态，比如挂起或失败，这样你就可以轻松地决定渲染、路由甚至错误消息.但总的来说，我看到你理解我的想法。