如何迭代 URL 列表并使用 useSWR 挂钩调用服务器

Question

我正在开发一个 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 挂钩调用服务器？还有其他优化方法来解决这个问题吗？非常感谢任何帮助或指导。

Answer 1

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

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