useSWR 处理多个请求

Question

我想在我的网络应用程序中实现 useSWR 并从项目中删除 axios，但我不知道如何在同一页面上多次使用 SWR。我想我可以使用两个钩子：

const { userData, userError } = useSWR(url, fetcher)

const { coinData, coinError } = useSWR(url,fetcher)

但这行不通。（我猜你需要使用{ data, error }）

这是我当前拥有的代码，但我想使用 SWR 向我的数据库发出另一个获取请求。

  const fetcher = (...args) => fetch(...args).then((res) => res.json());

  const { data, error } = useSWR(
    `https://api.coingecko.com/api/v3/coins/${coinURL}`,
    fetcher
  );

  if (error) {
    return <div>failed</div>;
  }
  if (!data) {
    return <div>Loading</div>;
  }
  return <div>{data.name}</div>;

使用 useSWR 在同一页面上发出多个请求的最佳方法是什么？

Answer 1

尝试

const { data : userData, error: userError } = useSWR(url, fetcher)

const { data : coinData, error: coinError } = useSWR(url,fetcher)

Answer 2

问题是您正在重复使用相同的常量变量名称。您可以将结果存储useSWR在一个对象中：

 const res1 = useSWR(..);
 const res2 = useSWR(..);

然后像正常一样引用每个属性：res1.loading等。