useContext在仅调用1次时多次返回值

Question

我想从API获取数据，并将其存储在上下文中，以便在多个组件上使用该数据。这个API有多个端点，我需要用户id来访问它们。为此，我从useParams中获取id，并使用上下文传递的hooksetID更改id。

问题是：当我更改ID后控制台记录数据时，控制台会显示4个不同的数据，一步一步地使用效果：

• 首先是上下文的初始状态(我理解这个(
• 第二个ID已更改
• 第三个错误已更改
• 最后一个数据已更改

但我只在useEffect回调中设置了id，所以我不明白为什么当值更改1次时它会触发4次。

我不知道我做这件事的方式是否正确(如果使用上下文是一件坏事(，或者只是我误解了useEffect和useContext。

// Component receiving the data
function APIChecker(){
const {id} = useParams();
const data = useContext(DataContext);
data.setID(id);

console.log(data);
return(
<>
</>
);
}
export default APIChecker;

// Context
export const DataContext = React.createContext();
export const DataProvider = ({children}) => {
const [id, setID] = useState(null);
const initialData = {
globalInfo: [],
activity: [],
averageSession: [],
performance: []
}
const [data, setData] = useState(initialData);
const [error, setError] = useState(404);
useEffect(() => {
const url = "http://localhost:3000/user/";
const fetchData = async () =>{
Promise.all([
fetch(url + id),
fetch(url + id + "/activity"),
fetch(url + id + "/average-sessions"),
fetch(url + id + "/performance")
]).then(([responseGlobal, responseActivity, responseSessions, responsePerformance]) => Promise.all([responseGlobal.json(), responseActivity.json(), responseSessions.json(), responsePerformance.json(), responseGlobal.status
])).then(([responseGlobal, responseActivity, responseSessions, responsePerformance, statusError]) => {
setError(statusError);
setData({
globalInfo: responseGlobal,
activity: responseActivity,
averageSessions: responseSessions,
performance: responsePerformance
});
}).catch(error => {
throw new Error(error);
});
}
if(id != null){
fetchData();
}
}, [id])
return(
<DataContext.Provider value={{id, data, setID, error}}>
{children}
</DataContext.Provider>
)
}

Answer 1

每次您的子组件APIChecker调用setID时，都会在父组件中触发useEffect，因为在dependency数组中您已经传递了id。这反过来又多次调用API。

useEffect(()=>{
/*your implementation*/
},[id]);

如果只想调用一次，只需将空数组作为依赖项传递，如下所示：

useEffect(()=>{
/*your implementation*/
},[]);