AXIOS在react中获取请求循环
AXIOS在react中获取请求循环
提问于 2021-04-21 21:28:11
我一直在干预我的react项目中的axios (我是一个初学者)。
不幸的是，我的API请求似乎循环了..我读过很多其他的帖子，但我想不出为什么会发生这种情况，我读过关于e.preventDefault()的文章，但我没能让它工作
const [state, set_state] = useState([]);
useEffect(() => {
async function fetch() {
const res = await axios.get(`${genUrl()}`);
set_state(res.data);
}
fetch();
},[state.results]);
const fetchedData = state.results;我知道genUrl永远运行，但我希望它只在getLimitsFromGen更改时运行(这是在路由更改时)
const genUrl = () => {
const [l, o] = getLimitsFromGen(validGeneration);
return `${API}?limit=${l}&offset=${o}`;
};说我真的不知道我在做什么，所以我可能完全错了
谢谢你的帮助
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-04-21 21:37:29
useEffect钩子中的依赖值是更新循环的原因。一旦设置了状态，它将触发更新，该更新还会再次触发获取和设置状态。如果getLimitsFromGen(validGeneration)不是异步函数，可以将getUrl的返回值设置为您的依赖项。阅读有关如何使用useEffect here的更多信息。还可以尝试将fetch()函数重命名为更具体的名称，如前所述，fetch是一个内置的js函数
const [state, set_state] = useState([]);
useEffect(() => {
async function fetchData() {
const res = await axios.get(`${genUrl()}`);
set_state(res.data);
}
fetchData();
},[genUrl()]);
const fetchedData = state.results;Stack Overflow用户
发布于 2021-04-21 21:34:53
是的，它之所以循环，是因为您传递了一个参数来使用useEffect的依赖数组，因此当该state.result更改时，useEffect会再次调用fetch
const [state, set_state] = useState([]);
useEffect(() => {
let mounted =true
async function fetch() {
const res = await axios.get(`${genUrl()}`);
if(mounted ){
set_state(res.data);
}
}
fetch();
//this is for cleaning up use effect to prevent updating state when component is unmounted
return ()=>mounted =false
},[]);
const fetchedData = state.results;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67196904
复制相关文章
相似问题
腾讯云开发者
