如何克服useEffect使用React Native Firebase包多次运行的问题？

xbp102n0 于 2023-03-24 发布在 React

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

我试图建立一个简单的android应用程序使用React Native Firebase的身份验证监听onAuthStateChanged.如果我理解正确的onAuthStateChanged方法有多个状态，所以它会触发useEffect多次.问题是，我想在验证后触发一个函数，检查用户是否包含在一个firebase数据库，但是由于这个原因，该函数将被多次触发，当我在onAuthStateChanged函数中调用它时，它将返回undifine（两次）。

const [userDetails, setUserDetails] = useState();
    const [initializing, setInitializing] = useState(true);

     function onAuthStateChanged(user) {
        if (user !== null) {
          setUserDetails({
            name: user.displayName,
            email: user.email,
            photo: user.photoURL,
            theme: 'default',
          });
          if (initializing) setInitializing(false); 
          checkUserInDB()
        } else {
          setUserDetails(null);
          setInitializing(true);
        }
      }

  useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; // unsubscribe on unmount
  }, []);

为了克服这个问题，我可以调用checkUserInDb（）函数，方法是将它留在onAuthStateChanged之外，等待userDetails和初始化状态完成：

if (userDetails !== null && initializing === false) {
        checkUserInDb()

虽然这将返回userDetails，但如果我记录它，它会发生3次。我试图从几个Angular 解决它（await /then/ timeout），但问题是在useEffect中，我只是用完了想法。如果你能给我指出正确的方向，我将不胜感激。

react-native

来源：https://stackoverflow.com/questions/75805507/how-to-overcome-that-the-useeffect-runs-multiple-times-using-react-native-fireba

1条答案

按热度按时间

qxgroojn1#

我花了几个小时来解决这个问题，我成功地克服了它。我相信onAuthStateChanged不喜欢我试图用上面的userDetails设置一个自定义状态。通过在文档中只使用user like，我没有undifenied返回.但它仍然不是问题的解决方案，因为它确实会onAuthStateChanged运行2-3次之前，其解决.我发现了另一个线程，有人使用了去抖动，我暗示，并与一点重构我原来的逻辑，它开始工作。

var debounceTimeout;
  const DebounceDueTime = 200; // 200ms

  function onAuthStateChanged(user) {
    if (debounceTimeout) clearTimeout(debounceTimeout);
    debounceTimeout = setTimeout(() => {
      debounceTimeout = null;
      handleAuthStateChanged(user);
    }, DebounceDueTime);
  }

  function handleAuthStateChanged(user) {
    setUser(user);
    if (initializing) setInitializing(false);
    if (user !== null) {
      console.log('=========> User is authenticated already:', user);
      checkUserInDb(user);
    } else {
      console.log('=========> User not found or signed out:', user);
    }
  }

useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; // unsubscribe on unmount
  }, []);

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

我来回答

如何克服useEffect使用React Native Firebase包多次运行的问题？

1条答案

相关问题

热门标签

最新问答