我有一个页面,显示通过API从MongoDb获取的数据,在这个页面中,你可以修改数据,然后页面将再次呈现以显示新数据。但检查网络请求时,我注意到我的react应用发送了无限数量的请求,这显然会降低所有操作的速度。我读到这是由以下代码片段引起的:
useEffect(() => {
fetchData();
}, [users]);
我还读到我必须清空useEffect的dependencies数组,但如果我这样做,那么当数据发生变化时(例如在数据库中插入一条新记录后),页面将不会重新呈现。
const [users, setUsers] = useState([]);
async function fetchData() {
const res = await fetch("http://localhost:8000/users/");
if (res.status === 401) {
console.log(res.json);
} else {
setUsers(await res.json());
}
}
我该怎么做?谢谢。
1条答案
按热度按时间lsmd5eda1#
您创建了一个无限循环:
fetchData
调用setUsers
,setUsers
设置users
。该效果对users
的更改做出React,并再次调用fetchData
。️我不知道你的确切用例,但一个解决方案是只有当你的应用中发生了一个实际的用户交互,让你想要获取新数据时,才调用
fetchData
。