使用 NextJS 和 SWR 库调用多个端点

Question

我在 NextJS 项目中使用 SWR 库，目前正在构建一个仪表板。我想访问多个端点来获取不同的数据，但我找不到任何使用 SWR 多次调用端点的参考。

我使用的语法如下；

const { data, error } = useSWR('/api/users', fetcher);
if (error) return <div>Failed to load</div>

const { data, error } = useSWR('/api/balloons', fetcher);
if (error) return <div>Failed to load</div>

如果我使用上面的代码，它会错误地指出data已经定义了，但是如果我data在每次尝试中更改为唯一的东西，它根本不起作用。

Answer 1

您可以重命名解构的值。

请尝试以下操作：

const { data: users, error: userError } = useSWR("/api/users", userFetcher);
const { data: baloons, error: ballonError } = useSWR("/api/balloons", balloonsFetcher);

if (userError) return <div>Failed to load users</div>;
if (ballonError) return <div>Failed to load ballons</div>;