用户数据更新的Firebase auth回调-如何在UI中保持用户数据最新

qacovj5a  于 2022-11-17  发布在  其他
关注(0)|答案(1)|浏览(177)

我有一个标准的方法来设置用户状态为currentuser,它是从onAuthStateChanged返回的。我想要一个useEffect钩子,当用户信息更新时调用它。我不知道怎么做。
我目前的解决方案是手动触发一个函数,将checkingStatus设置为true,以便下面的useEffect再次运行。

useEffect(() => {
    console.log("change")
    const unsubscribe = onAuthStateChanged(auth, (currentuser) => {
      setUser(currentuser);
      setCheckingStatus(false);
    });

    return () => {
      unsubscribe();
    };
  }, [aucheckingStatus]);

是否有一种方法可以侦听对用户所做的任何更改,然后触发一个useEffect来更新用户状态?

v1l68za4

v1l68za41#

虽然auth.currentUser实际上包含最新的用户数据,但出于我无法理解的原因,您实际上无法使用auth.currentUser触发useEffect,因为ReactJS无法识别更改,而且将用户状态设置为auth.currentUser也不起作用,但出于某种原因,如果您传播auth.currentUser,React将正确更新状态。
因此,我的解决方案是在完成配置文件更新或其他与用户数据相关的操作后传播auth.currentUser

const updateUserProfile = (profileData) => {
  updateProfile(auth.currentUser, profileData).then((res) => {
    // Success
    setUser({...auth.currentUser})
  }).catch((error) => {
    // Fail
  })
}

useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, (currentuser) => {
    setUser(currentuser);
  });

  return () => {
    unsubscribe();
  };
}, []);

相关问题