reactjs - 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)

.
.
. 

我的目标是使用拦截器来检查 token 是否有效以及是否清除用户并进行登录。我在其他 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

然后添加 WithAxios之后 MyContext.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>
    )
}