React native 如何在axios文件中调用useNavigation

React native 如何在axios文件中调用useNavigation,react-native,axios,react-navigation-v5,React Native,Axios,React Navigation V5,根据我的请求,我尝试实现axios拦截器。 所以当错误响应被禁止时(401),我想清除令牌并导航到登录屏幕。 但当我想在axios文件中从react navigation v5调用useNavigation时,它总是显示这样的错误 React Hook "useNavigation" is called in function "refreshAccessToken" that is neither a React function component n

根据我的请求,我尝试实现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

你不能,钩子只能在组件内部调用。不过,在这种情况下,有一个关于如何使用的指南


您还可以发送事件(通过自定义事件发射器),并在应用程序中导航道具可用的任何其他位置设置侦听器。

您不能,钩子只能在组件内部调用。不过,在这种情况下,有一个关于如何使用的指南

您还可以发送事件(通过自定义事件发射器),并在应用程序中导航道具可用的任何其他位置设置侦听器