Question

我有一个axios实例来设置我的baseURL并设置interceptors，但是每次我想使用this.props.navigation时都会遇到错误undefined is not an object (this.props.navigation)

代码如下：

// Axios Setting
api.axiosInstance.interceptors.response.use((response)=>{
  return response
}, (error) => {
  if(error.response == undefined){
    return Promise.reject(
    Alert.alert("Perhatian","Tidak dapat terhubung ke server \n\n Cek koneksi internet anda",[
      {text:"OK", onPress:()=>BackHandler.exitApp()}
    ])
    )
  } else if (error.response.status === 401) {
    return Promise.reject(
      goToLogin("Login", null)
    );
  }
})

//goToLogin Function on different js :
export function goToLogin(routeName, params){
  return(
    Alert.alert("Peringatan", "Sepertinya akun ini sudah login di perangkat lain\n\nsilahkan logout dan login kembali untuk dapat mengakses kembali",[
      {text:'Logout', onPress:()=>{
        console.log(this.props) // i got undefined on this line
        // this.props.navigation.dispatch(
        //   NavigationActions.navigate({
        //     routeName:routeName,
        //     key:routeName,
        //     params:params
        //   })
        // ),
        // deleteAllUser()
      }}
    ],{cancelable: false})
  )
}

当组件（axios）不在屏幕上时，如何访问this.props.navigation？

Answer 1

您的问题是您试图使用不是React Components的功能中的导航道具，并且可能根本无法访问导航。在这种情况下，建议使用docs

中所述的导航服务

这是一个简单的示例，说明如何将其与axios拦截器一起使用，以更好地理解我的建议：

https://snack.expo.io/BkLWor8FX

在App.js上，我使用axios对不存在的网址（例如“ https://www.google.coms”）进行GET调用。拦截器将处理失败的请求（Interceptors.js），并将使用NavigationService（NavigationService.js）重定向到错误屏幕。

我认为您可以使用类似的方法。祝你好运！

React Navigation-如何在axios实例中访问this.props.navigation

1 个答案: