React Context在获取用户数据时创建了一个无限循环

Question

我有一个React Context，所以我可以保存一些数据，并在我的React项目中在我想要的地方重用它。这是我正在处理的代码：

import React, { useState, createContext } from "react"
import apiRequest from "../axios"
import { getCookie } from "../Utils"
import jwt_decode from "jwt-decode"
export const UserContext = React.createContext()
export const UserProvider = (props) => {
const [value, setValue] = useState({
loading: false,
isLoggedIn: false,
userId: "",
username: ""
})
const updateData = (toUpdate) => {
setValue({...value, ...toUpdate})
}
const fetchUser = async (userId, key) => {
await apiRequest("get", "/user/" + userId, null, () => {}, (data) => {
updateData({
loading: false,
isLoggedIn: true,
userId: userId,
username: data.user.username
})
}, (errMessage) => {
updateData({
loading: false
})
}, key)
}
// load user data if access token is set
const accessToken = getCookie("access")
if (accessToken && !value.loggedIn && !value.loading) {
updateData({ loading: true })
const { sub: userId } = jwt_decode(accessToken)
fetchUser(userId, accessToken)              // if I comment this out, then no infinite loop
}
const methods = {
fetchUser,
updateData
}
return (
<UserContext.Provider value={[value, methods]}>
{props.children}
</UserContext.Provider>
)
}

我已经评论了这行，它在那里创建了这个循环。有人能告诉我它为什么会这样吗？

Answer 1

您需要在useEffect中执行获取请求，以便仅在组件安装或cookie值更改时才会触发该请求。

试试这个；

import React, { useState, createContext, useEffect } from "react"
import apiRequest from "../axios"
import { getCookie } from "../Utils"
import jwt_decode from "jwt-decode"
export const UserContext = React.createContext()
export const UserProvider = (props) => {
const [value, setValue] = useState({
loading: false,
isLoggedIn: false,
userId: "",
username: ""
})
const updateData = (toUpdate) => {
setValue({...value, ...toUpdate})
}
const fetchUser = async (userId, key) => {
updateValue({ loading: true });
await apiRequest("get", "/user/" + userId, null, () => {}, (data) => {
updateData({
loading: false,
isLoggedIn: true,
userId: userId,
username: data.user.username
})
}, (errMessage) => {
updateData({loading: false})
}, key)
}
// load user data if access token is set
const accessToken = getCookie("access")
useEffect(() => {
if (accessToken && !value.loggedIn && !value.loading) {
const { sub: userId } = jwt_decode(accessToken)
fetchUser(userId, accessToken);
}
}, [accessToken, value.loggedId, value.loading]);
const methods = {
fetchUser,
updateData
}
return (
<UserContext.Provider value={[value, methods]}>
{props.children}
</UserContext.Provider>
)
}