reactjs 我如何使用useSWR钩子来遍历URL列表并调用服务器

tuwxkamq 于 11个月前发布在 React

关注(0)|答案(2)|浏览(120)

我正在开发一个ReactJS Web应用程序，遇到了一个问题。问题是我有一个JSON数据的URL数组，我想使用“useSWR”钩子从服务器获取所有这些JSON数据（这样获取的数据也会被缓存）。现在的问题是，根据规则，我们不能在任何循环或块中使用钩子。
举例来说─
1.我有什么- [“http：//someapi/a.json”，“http：//someapi/b.json”，“http：//someapi/c.json”]
1.我想做的是-遍历这个数组并使用useSWR钩子调用这些URL，这样我就有了一个[ JSON ObjectA，JSON ObjectB，JSON ObjectC ]的列表
1.为什么我试图使用“useSWR”，因为我知道，这个数据不会改变24小时，我想缓存这些值。

**任何人都可以建议我如何在URL列表中添加并使用useSWR钩子调用服务器？**是否有其他优化方法来解决这个问题？任何帮助或指导都非常感谢。

reactjs

来源：https://stackoverflow.com/questions/67635551/how-can-i-iterate-over-the-list-of-urls-and-make-a-call-to-the-server-using-uses

2条答案

按热度按时间

vmdwslir1#

我认为其中一个选项是使用url prop创建React FetchComponent，并在内部使用useSWR钩子。将组件渲染为url数量。类似于以下内容：

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

字符串

赞(0）回复(0）举报 11个月前

eaf3rand2#

你可以写一个自定义的fetcher来处理一个URL数组，并用一个响应数组来响应：

const multiFetcher = (urls) => Promise.all(
  urls.map(url => fetch(url).then(r => r.json())
)

function MyComponent() {
  const { data } = useSWR(["http://someapi/a.json",
                           "http://someapi/b.json",
                           "http://someapi/c.json"], multiFetcher)

  return <ul>{data.map(d => <li><pre>{JSON.stringify(d)}</pre></li>)}</ul>
}

字符串

赞(0）回复(0）举报 11个月前

我来回答

reactjs 我如何使用useSWR钩子来遍历URL列表并调用服务器

2条答案

相关问题

热门标签

最新问答