axios 拦截器内的 useContext

我不明白为什么我的 useContext 没有在这个函数中被调用：

import { useContext } from "react";
import { MyContext } from "../contexts/MyContext.js";
import axios from "axios";

const baseURL = "...";

const axiosInstance = axios.create({
  baseURL: baseURL,
  timeout: 5000,
.
.
.
});
axiosInstance.interceptors.response.use(
  (response) => response,
  async (error) => {
    const { setUser } = useContext(MyContext);
    console.log("anything after this line is not running!!!!");
    setUser(null)

.
.
. 

我的目标是使用拦截器检查令牌是否有效，以及是否未清除用户并进行登录。我在其他反应组件中使用相同的上下文。它在那里工作得很好，只是在这里不运行！知道我做错了什么吗？

我和你有同样的问题。我是这样解决的：

您只能使用useContext在功能组件内部，这就是你无法执行的原因setUser在你的 axios 拦截器中。

您可以做的是创建一个名为的单独文件AxiosErrorHandler:

// AxiosErrorHandler.js

import { useContext, useEffect } from 'react'
import axios from 'axios'

const AxiosErrorHandler = ({ children }) => {
    const { setUser } = useContext(MyContext);

    useEffect(() => {
        const responseInterceptor = axios.interceptors.response.use(response => response, async (error) => {
            setUser(null)
        })

        return () => {
            axios.interceptors.response.eject(responseInterceptor);
        }
    }, [setUser])

    return children
}

export default AxiosErrorHandler

然后添加WithAxios after MyContext.Provider访问您的上下文，例如：

// App.js

const App = () => {
    const [user, setUser] = useState(initialState)

    return (
        <MyContext.Provider value={{ setUser }}>
            <AxiosErrorHandler>
                {/* render the rest of your components here  */}
            </AxiosErrorHandler>
        </MyContext.Provider>
    )
}