reactjs - 尝试使用 SWR (Next.js) 获取 API 时出错

Question

我从 SWR 示例页面成功运行了以下代码：

import useSWR from "swr";

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

export default function App() {
  const { data, error } = useSWR(
    "https://api.github.com/repos/vercel/swr",
    fetcher
  );

  if (error) return "An error has occurred.";
  if (!data) return "Loading...";
  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>{data.subscribers_count}</strong>{" "}
      <strong>{data.stargazers_count}</strong>{" "}
      <strong>{data.forks_count}</strong>
    </div>
  );
}

但是，当我使用我的自定义 API 并更新要呈现的属性 ( {data.id}, {data.title}...) 时，我得到“发生错误”。

如果我删除条件返回，我会得到“数据未定义”：

未处理的运行时错误类型错误：数据未定义

我在项目的其他部分使用了我的 API，没有遇到任何问题。

Answer 1

我个人像这个例子一样处理它

使用请求.js：

import useSWR from 'swr'
import axios from 'axios'

export default function useRequest(request, { initialData, ...config } = {}) {
  return useSWR(
    request && JSON.stringify(request),
    () => axios(request || {}).then(response => response.data),
    {
      ...config,
      initialData: initialData && {
        status: 200,
        statusText: 'InitialData',
        headers: {},
        data: initialData
      }
    }
  )
}

示例.jsx：

  import useRequest from '../libs/useRequest'

  const { data } = useRequest({
    url: 'https://api.github.com/repos/vercel/swr'
  })