Javascript 使用react定期运行fetch

我有一个包含不同react组件的网格，它们都是独立的——它们获取自己的数据并显示出来

我想让它们每隔15分钟自动重新蚀刻和更新一次。我的第一个想法是HOC，但对于较新的钩子和功能组件，我尝试使用钩子

因此，我已经能够创建一个自定义钩子来处理数据的获取：

constusefetching=（url）=>{
const[loading，setLoading]=useState（true）；
const[data，setData]=useState（{}）；
const[error，setError]=useState（null）；
const[reload，setReload]=useState（true）；
useffect（（）=>{
const fetchData=async（）=>{
试一试{
const response=等待获取（url）；
如果（！response.ok）{
抛出新错误（“出了问题”）；
}
const json=await response.json（）；
if（json）{
setData（json）；
}
}捕获（错误）{
设置错误（错误）；
}
设置加载（假）；
}
fetchData（）；
}，[url，重新加载]；
返回{
加载，
数据，
错误
};
};

然后，使用此选项的两个组件：

const App1=（）=>{
常量{加载，数据，错误}=useFetching(
"https://hn.algolia.com/api/v1/search?query=redux"
);
如果（加载| |错误）{
返回{loading？“loading…”：error.message}
；
}
返回(

{data.hits.map（hit=>


)}

);
};
常量App2=（）=>{
常量{加载，数据，错误}=useFetching(
"https://hn.algolia.com/api/v1/search?query=balls"
);
如果（加载| |错误）{
返回{loading？“loading…”：error.message}
；
}
返回(

{data.hits.map（hit=>


)}

);
};
ReactDOM.render（，document.getElementById（'root'））；

这可以很好地工作-使用自定义挂钩。所以我想的是：

设置一个间隔计时器，每隔15分钟运行一次，并更改“重新加载”状态标志-以触发重新蚀刻和更新。还要确保在卸载组件时间隔计时器未设置

为了访问state和setReload方法，我将计时器放在useFetching组件中，但由于它启动了多个计时器，因此无法工作。我想我有14个计时器，只有两个组件

我真的不确定如何继续-我希望一个计时器只处理所有组件的刷新-同时我希望组件是独立的，不必与外部计时器共享任何内容。如果每个组件都有一个计时器就可以了——只要在卸载组件时正确地销毁它——如果这个机制内置到useFetching钩子中就更好了

有没有更好的方法来构建这个——我没有想到的

---

非常感谢您的建议

因为

useFetch

封装了单个组件的获取逻辑，所以每个组件管理自己的间隔是有意义的。您可以通过在挂载上声明一个间隔来实现这一点，该间隔将在十五分钟后触发

useEffect(() =>{
    let interval = setInterval(() => setReload(true), (1000 * 60 * 15))
    //destroy interval on unmount
    return () => clearInterval(interval)
})

---

有关

useffect

（包括上述效果清理）的更多信息。

您需要一个

useffect

挂钩。这篇文章准确地解释了原因和方式：

哈哈，是的。清理工作就在那里。谢谢你提高了答案！谢谢使用useffect（（）=>{const interval=setInterval（（）=>setReload（state=>！state），3000）；console.log（'setup interval'+interval）；return（）=>clearInterval（interval）；}，[]）它可以工作！谢谢所以我每次都要切换重新加载，而且我只需要运行一次。这是一篇非常棒的文章，谢谢！不知道为什么，但使用setInterval它工作得很好——可能是因为我总是运行相同的东西并使用当前状态