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

【问题标题】：React Navigation - How to access this.props.navigation in axios instanceReact Navigation - 如何在 axios 实例中访问 this.props.navigation
【发布时间】：2018-09-24 06:01:27
【问题描述】：

我有一个 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？

【问题讨论】：

也许文档中的这份指南可以帮助您弄清楚该怎么做：reactnavigation.org/docs/en/…
您需要将导航对象从组件传递到 API 模块，并在调用 goToLogin 时将其作为参数传递，以便导航对象在 goToLogin 函数中可用。
@MohammedAshfaq 如果我这样做，我可以在我的所有 API 中添加 goToLogin()，而不是为所有连接创建一个代码
@needsleep 文档不是我需要的，this docs 几乎可以帮助我，但我需要传递 function 而不是 React.Component
对不起，我没有得到。

标签： javascript react-native axios react-navigation

【解决方案1】：

您的问题是您尝试使用非 React 组件的函数中的导航道具，并且可能根本无法访问导航。在这些情况下，建议使用 docs 中所述的导航服务

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

https://snack.expo.io/BkLWor8FX

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

我认为你可以在你的情况下使用类似的东西。祝你好运！

【讨论】：

代码看起来很有希望，我会尝试一下，感谢代码
我尝试过这种方式，但我一直在为NavigationService 中的navigator 定义不确定，这是我的问题，如果可以请帮助我stackoverflow.com/questions/54577861/…