Question

我的应用程序的运行方式是，应用程序的一部分无需登录即可看到，要查看其余部分，用户必须登录。我的应用程序由 2 个堆栈组成，即身份验证堆栈和应用堆栈。身份验证堆栈包含登录和注册屏幕。目前这是我的应用程序的逻辑。例如，假设用户转到仅在用户登录时可见的消息选项卡。在 MessagesScreen.js 上，我有以下代码。

const [user, setUser] = useState();

useEffect(() => {
console.log('Use effect called');
if (!user) {
  fetchUser();
  if (!user) {
    console.log('THis is called');
    navigation.navigate('Auth', {
      screen: 'Login',
      params: {comingFromScreen: 'Messages'},
    });
  } else {
    console.log(user);
  }
}
}, []);

const fetchUser = async () => {
try {
  const userData = await getUser();
  setUser(userData);
} catch (e) {
  console.log('No user found');
}
};

getUser，就是下面的函数：

export const getUser = async () => {
  try {
    let userData = await AsyncStorage.getItem('userData');
    let data = JSON.parse(userData);
  } catch (error) {
    console.log('Something went wrong', error);
  }
};

LoginScreen 由以下代码组成：

const handleLogin = () => {
    if (email === '' || password === '') {
      alert('Email or password not provided');
    } else {
      firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then((res) => {
          storeUser(JSON.stringify(res.user));
        })
        .catch((e) => alert(e.message));
      navigation.navigate('Home', {screen: comingFromScreen});
    }
  };

storeUser 如下：

export const storeUser = async (user) => {
  try {
    await AsyncStorage.setItem('userData', JSON.stringify(user));
  } catch (error) {
    console.log('Something went wrong', error);
  }
};

当我第一次导航到消息屏幕时，逻辑起作用并且我看到登录屏幕。但是，如果我单击登录屏幕上的“X”按钮，返回主屏幕，然后返回消息屏幕，我会看到屏幕，而且，甚至没有调用 useEffect。

我对本机反应有点陌生，所以有人可以告诉我我需要改变什么才能达到我想要的效果吗？

Answer 1

您可以通过执行以下操作使 useEffect 依赖于用户状态，并且每次用户状态更改时它都会调用。

只要用户更改如下，它就会始终调用 useEffect：

useEffect(() => {
        console.log('Use effect called');
        if (!user) {
          fetchUser(); 
          if (!user) {
            navigation.navigate('Auth', {
              screen: 'Login',
              params: {comingFromScreen: 'Messages'},
            });
          } else {
            console.log(user);
          }
        }
    }, [user]);

Answer 2

找到了这个问题的解决方案，我使用了 useFocusEffect 钩子而不是 useEffect ，它似乎解决了问题。

身份验证流程反应原生

2 个答案: