Question

我正在编写一个 ReactJS 应用程序，其中我有一个提供程序类 (AuthProvider.js) 处理 Firebase 身份验证。它的几个孩子使用 auth 状态。一切正常运行了大约一个月，但上周末我们开始遇到问题，可能是因为一些升级，我正在尝试排除故障。基本上，在 AuthProvider 组件中，我有一个 currentUser 状态，当没有人登录时，它应该为空，或者在有用户时包含有关当前用户的一些数据。可能只是 UID。可能是完整的用户对象。可能是一个布尔值。在这一点上，我们并不挑剔。基本上，当我尝试

的教科书方法时

  useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
       setCurrentUser(user);
    });

    // Cleanup subscription on unmount
    return () => unsubscribe();
  }, []);

在 AuthProvider 类（有或没有 useEffect）中，我得到“呈现的钩子比预期的少”。我听说过一些关于在回调函数中使用 setState 是个坏主意的陈词滥调，但在设置 errors（另一个像 currentUser 一样导出的状态对象）时我没有问题。

是否有一种安全可靠的方法可以让我从 AuthProvider 的子组件中观察 firebase 状态，并且代码重复最少？通常，我有几个案例，我向客人展示一个组件，向会员展示另一个，因此状态对我来说很重要。

Answer 1

我认为最好的方法是使用 context-api 或 redux 来使用全局状态。因为用户状态在你的项目中是一个非常重要的状态。当您有更多组件时，您必须将一个组件的用户状态传递给另一个组件。我认为这不是一个好的做法，你不能这样做。

如果您使用我上面提到的任何状态管理系统，那么您可以从 onAuthStateChanged 获取经过身份验证的用户并将其分派到全局状态。然后，您可以在项目中的任何地方使用该状态。

 useEffect(() => {

    auth.onAuthStateChanged(userAuth => {
      dispatch({
        type: actionTypes.SET_USER,
        user: userAuth,
      })
    })
  }, [])

注意：这不是您首先必须在 redux 或 context-api 中创建 reducer 和其他程序的完整代码。然后你就可以使用它了。

Answer 2

试试这个：

useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
    if(user){
        setCurrentUser(user);
         }else{
        setCurrentUser(null);
      }
    });

    // Cleanup subscription on unmount
    return () => unsubscribe();
  }, []);

在 ReactJS 中设置 Firebase 身份验证状态更改时的状态

2 个答案: