ReactJS Firebase 在 Context API 全局状态下经过身份验证的用户集，但值只能通过空检查获得？

Posted 2023-04-14

【中文标题】ReactJS Firebase 在 Context API 全局状态下经过身份验证的用户集，但值只能通过空检查获得？

【英文标题】：ReactJS Firebase authenticated user set in Context API global state but values are only available through a null check?

【发布时间】：2021-06-20 01:20:36

【问题描述】：

这完全不是问题，但我真的对它的工作原理感到困惑。我正在使用 Firebase 身份验证，在我的 App.js 中，我通过 onAuthStateChanged 将用户设置为全局状态。

const auth = firebase.auth();

useEffect(() => 
    auth.onAuthStateChanged((authUser) => 
      console.log("THE USER IS >>> ", authUser);
      if (authUser) 
        // the user just logged in / the user was logged in
        dispatch(
          type: "SET_USER",
          user: authUser,
        );
       else 
        // the user is logged out
        dispatch(
          type: "SET_USER",
          user: null,
        );
      
    );
  , []);

然后我想在组件中引用用户的存储状态。但是，如果我尝试直接引用组件，我会得到 TypeError: Cannot read property 'email' of null，其中 null 应该是用户。

const [user, dispatch] = useStateValue();

return (
        <div className="container">
                <p>user.password</p>
        </div>
    )

但是，如果我对用户设置一个空检查，它会起作用。

const [user, dispatch] = useStateValue();

return (
        <div className="container">
                <p>!user ? "You need to login" : user.email</p>
        </div>
    )

我猜用户需要先从 Firebase 中调用，然后才能调用。但是如果它存储在全局状态中，为什么需要在它可用之前再次调用它呢？谁能解释一下？

【参考方案1】：

您在哪里使用 AuthProvider 包装您的组件？在 App.js 上还是在 .index.js 上？

在子组件使用之前，您需要将父组件与上下文 Provider 包装起来。

【讨论】：

AuthProvider 在 App.js 中，App.js 封装了所有子组件。 reducer 将初始状态和操作传递给上下文 Provider，并在 index.js 中包裹 App.js。