React Native 如何控制(useEffect). HOOK

fafcakar  于 2023-02-19  发布在  React
关注(0)|答案(1)|浏览(150)

我正在react native中为API创建前端。对于签名身份验证,我使用FireBase服务。一切都很好,但是,我有一个问题。我希望在创建用户后,我的程序停留在登录屏幕上,当在登录屏幕上提供凭据时,它应该移动到主屏幕。
在我的例子中,它导航到登录屏幕,然后使用effect()activate,它导航到主页。我如何才能停留在主页屏幕?
// Registrationscreen

const handleSignUp = () => {
    createUserWithEmailAndPassword( auth,email, password)
      .then((userCredential) => {
        // Signed in
        const user = userCredential.user;
        // ...
      })
      .then( navigation.dispatch(
        StackActions.replace('Login', {
          user: 'jane',
        })
      ))
      .catch((error) => alert(error.message));
  };

//logIn Screen

const LoginScreen = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const navigation = useNavigation();

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      if (user) {
        navigation.replace("Home");
      }
    });

    return unsubscribe;
  }, []);  

const handleLogin = () => {
    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in
        const user = userCredential.user;
        // ...
      })
      
    
      
      .catch((error) => alert(error.message));
  };

我希望在新用户注册后,它应该导航到登录页面并停留在那里,当我们输入凭据并按下登录键时,它应该导航到主屏幕。

eimct9ow

eimct9ow1#

不幸的是,很多地方可能会出错,但看起来LoginScreen组件中有一个非常严重的错误-useEffect只在组件初始呈现时运行。这意味着在调用handleLogin函数时,useEffect不知道它需要再次运行-这意味着重定向到主屏幕永远不会运行。
要临时修复此问题:在state中创建一个用户对象。当用户从signInWithEmailAndPassword返回时,您可以将用户存储到state中。提醒您需要更新useEffect中的依赖项数组以包含用户对象。

相关问题