axios 拦截器中的 useContext

Question

我无法弄清楚为什么我的 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)

.
.
. 

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

Answer 1

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

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

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

// WithAxios.js

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

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

    useMemo(() => {
        axios.interceptors.response.use(response => response, async (error) => {
            setUser(null)
        })
    }, [setUser])

    return children
}

export default WithAxios

然后添加WithAxiosafterMyContext.Provider以访问您的上下文，例如：

// App.js

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

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