如何在axios文件中调用useNavigation答案

【问题标题】：How to call useNavigation inside axios file如何在axios文件中调用useNavigation
【发布时间】：2020-09-07 04:24:03
【问题描述】：

我尝试为我的请求实现 axios 拦截器。因此，当错误响应被禁止（401）时，我想清除令牌并导航到登录屏幕。但是当我想从我的axios文件中的react navigation v5调用useNavigation时，它总是显示这样的错误。

React Hook "useNavigation" is called in function "refreshAccessToken" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter.

这是我的axios文件代码，

import axios from 'axios'
import AsyncStorage from '@react-native-community/async-storage'
import {useNavigation} from '@react-navigation/native'
import {generateRandomString, getDeviceInfo} from '../helper/helper'

const base = axios.create({
  baseURL: '------',
  timeout: 500000,
  headers: {
    'Content-Type': 'application/json'
  }
})

async function refreshAccessToken() {
  const navigation = useNavigation()
  try {
    const refreshToken = await AsyncStorage.getItem('refreshToken')
    const response = await base.get('------', {
      refreshToken
    })
    await AsyncStorage.setItem('accessToken', response.data.accessToken)
    console.log('Response from refresh access token ', response)
    return Promise.resolve(response.data)
  } catch (error) {
    console.log('Error from refresh access token', error.response)
    if (error.response.data.errors.flag === 'INVALID_REFRESH_TOKEN') {
      await AsyncStorage.removeItem('refreshToken')
      await AsyncStorage.removeItem('accessToken')
    }
    return Promise.reject(error)
  }
}

base.interceptors.request.use(
  async function (config) {
    const accessToken = await AsyncStorage.getItem('accessToken')
    config.headers.authorization = accessToken
    const deviceInfo = await getDeviceInfo()
    const latitude = await AsyncStorage.getItem('latitude')
    const longitude = await AsyncStorage.getItem('longitude')
    config.headers['accept-language'] = 'id-ID'
    config.headers['version'] = '1.0.0'
    config.headers['date'] = new Date().toUTCString()
    config.headers['x-coordinate'] = `${latitude};${longitude}`
    config.headers['x-trace-id'] = generateRandomString()
    config.headers['x-device'] = `${deviceInfo.deviceType}/${deviceInfo.deviceName}/${deviceInfo.deviceVersion}/${deviceInfo.deviceUid}`
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)

base.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config
    if (error.response.status === 403 && !originalRequest._retry) {
      originalRequest._retry = true
      const accessToken = await refreshAccessToken()

      originalRequest.headers.Authorization = accessToken
      return axios(originalRequest)
    }
    return Promise.reject(error)
  }
)

export default base

【问题讨论】：

标签： react-native axios react-navigation-v5

【解决方案1】：

你不能，钩子只能在组件内部调用。不过，有一个关于如何navigate without the navigation prop 的指南，您可以在这种情况下使用。

您还可以发送一个事件（通过自定义事件发射器）并在应用中导航道具可用的任何其他位置设置一个侦听器。

【讨论】：