我无法弄清楚为什么我的 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 组件中使用相同的上下文。它在那里工作正常,只是没有在这里运行!知道我做错了什么吗?
我和你有同样的问题。这是我解决它的方法:
您只能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
afterMyContext.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>
)
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句