如何遍历 URL 列表并使用 useSWR hook

问题描述

我正在开发一个 ReactJS Web 应用程序，但遇到了一个问题。问题是我有一些 JSON 数据的 URL 数组，我想使用“useSWR”钩子从服务器获取所有这些 JSON 数据（以便获取的数据也被缓存）。现在的问题是根据规则，我们不能在任何循环或块中使用钩子。

示例 -

1. 我所拥有的 - ["http://someapi/a.json"、"http://someapi/b.json"、"http://someapi/c.json"]
2. 我想要做什么 - 遍历这个数组并使用 useSWR 钩子调用这些 url，这样我就有了一个 [JSON ObjectA,JSON ObjectB,JSON ObjectC] 的列表
3. 为什么我要尝试使用“useSWR”，因为我知道，这些数据在 24 小时内不会改变，我想缓存这些值。

谁能建议我如何遍历 URL 列表并使用 useSWR 钩子调用服务器？ 还有其他一些优化的方法可以解决这个问题吗？非常感谢任何帮助或指导。

解决方法

我认为的一种选择是使用 url prop 创建 React FetchComponent 并在内部使用 useSWR 钩子。 将组件渲染为 url 的数量。 像这样：

["http://someapi/a.json","http://someapi/b.json","http://someapi/c.json"].map(url=><FetchComponent url={url}/>)