如何在 NextJS 中使用 Suspense 的多个 useSWR 钩子？

Question

我有一个 NextJS 项目，我尝试使用 SWR 来获取数据。我的问题是：

useSWR当我在一个组件中使用两个以上的-hooks 时，我会收到以下钩子错误：

• Warning: React has detected a change in the order of Hooks called by ComponentExample. This will lead to bugs and errors if not fixed.
• Uncaught Error: Update hook called on initial render. This is likely a bug in React. Please file an issue.

这是最小复制代码存储库：https ://github.com/LarsFlieger/swr-suspense-multiple

我正在Component.tsx尝试进行 3 次提取并控制台记录输出：

"use client";

import useSWR from "swr";

const fetchWithDelay = async (url: string) => {
    const delay = parseInt(url) * 1000;
    await new Promise((resolve) => setTimeout(() => resolve(url), delay));
    return url;
};

export const ComponentExample: React.FC = () => {
    const { data: dataAfter1 } = useSWR("1", fetchWithDelay, {
        suspense: true,
    });
    console.log(dataAfter1);

    const { data: dataAfter2 } = useSWR("2", fetchWithDelay, {
        suspense: true,
    });
    console.log(dataAfter2);

    const { data: dataAfter3 } = useSWR("3", fetchWithDelay, {
        suspense: true,
    });
    console.log(dataAfter3);

    return (
        <main>
            <p>Page loaded!</p>
        </main>
    );
};

我该如何解决这个问题？如果可以使用多个钩子，我找不到任何一般规则，但据我了解应该没问题，因为：

• 在几个示例中，有多个：https://swr.vercel.app/docs/conditional-fetching#dependent