0

由于在第一次渲染时我无法获得router.query我传递的参数，getServerSideProps如下所示：

export async function getServerSideProps(context) {
    return {
        props: { params: context.params },
    };
}

然后在函数中尝试执行 API 调用，但出现 API 停止错误

API 在未发送 /api/projects/nichole_robel23 响应的情况下解析，这可能会导致请求停止。

这是我的代码：

export default function Project({ params }) {
    const { slug } = params;

    let [projectData, setProjectData] = useState([]);
    let [loading, setLoading] = useState(true);

    const { data } = useSWR('http://localhost:3000/api/projects/' + slug);

    useEffect(() => {
        if (data) {
            setProjectData(data.data.project);
            setLoading(false);
        }
    }, [data]);

......

我有全局SWRCofig如下

<SWRConfig value={{ fetcher: (url) => axios(url).then(r => r.data) }}>
                        <Layout>
                            <Component {...pageProps} />
                        </Layout>
                    </SWRConfig>

有什么办法可以解决问题吗？

4

1 回答 1

3

您缺少您的fetcher - 接受 SWR 的密钥并返回数据的函数，因此没有调用 API。

您也没有从 API 正确返回响应——这很可能是没有等待 promise/async 正确实现的情况。

客户

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

export default function Home({ params }) {
  const { slug } = params;
  const [projectData, setProjectData] = useState([]);
  const [loading, setLoading] = useState(true);

  const { data } = useSWR(`http://localhost:3000/api/projects/${slug}`, fetcher);

  useEffect(() => {
    if (data) {
      setProjectData(data);
      setLoading(false);
    }
  }, [data]);

API

const getData = () => {
  return new Promise((resolve, reject) => {
    // simulate delay
    setTimeout(() => {
      return resolve([{ name: 'luke' }, { name: 'darth' }]);
    }, 2000);
  });
}

export default async (req, res) => {
  // below will result in: API resolved without sending a response for /api/projects/vader, this may result in stalled requests
  // getData()
  //   .then((data) => {
  //     res.status(200).json(data);
  //   });

  // better
  const data = await getData();
  res.status(200).json(data);
}
于 2021-09-16T19:26:14.853 回答