React Navigation 5，如何在使用 axios 的函数中使用 this.props.navigation.navigate()

Question

检查 login() 函数中的登录字段后，我需要导航到身份验证屏幕。如果 API 请求响应有效，则应该进行导航，如果没有，则继续停留在登录屏幕中。

这是我的 login() 函数，

>  loginUser = () =>{
>         this.setState({loading:true})
>         const user = {
>            email:this.state.email,
>            password:this.state.password
>        }
>        Axios
>          .post('http://10.0.2.2:5000/users/login',user)
>          .then(res=>{
>             if(res.status === 200){
>                 deviceStorage.saveItem('id',res.data.id);
>                 deviceStorage.saveItem("jwtToken", res.data.token);
>                 Alert.alert('Successfuly loged in')

>                 this.props.navigation.navigate('AuthHome')
>             }
>             this.setState({loading:false})
>          })
>          .catch(err=>{
>              if(err.response.status ===400){
>                  Alert.alert("Incorrect Email or Password");
>              }
>              this.setState({loading:false})
>          })
>     }

但我只能在我将导航放入 onPress 按钮时进行导航。

                const {navigate} = this.props.navigation
                <TouchableOpacity
                    onPress={()=>navigate('AuthHome',{screenname:'Authe'})}
                   // onPress={()=>this.loginUser}
                >
                    <Text> Log In </Text>
                </TouchableOpacity>
                <Text  
                   onPress={()=>navigation.navigate('Signup')}
                >
                    Don't have account? Click here to Sign Up
                </Text> 

但我想要的是当用户按下登录按钮时触发登录功能。然后登录功能将检查文本字段并导航到适当的屏幕。

onPress={()=>this.login}

我尝试在登录功能中使用this.props.navigation.navigate('screen name')，但没有任何反应。看起来我无法在axios中使用this.props.navigation.navigate('screen name')。

我应该做哪些改变？谁能帮我解决这个问题。

Answer 1

这是因为 this 在 axios .then() 范围内不存在。更详细的信息可以在这里找到：How to access the correct `this` inside a callback?

关于将this 转换为变量的多数共识：

const _this = this;

并且，在您的情况下，在 axios .then() 范围内以这种方式调用：

_this.props.navigation.navigate('AuthHome')