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

【问题标题】：Error when trying to fetch an API using SWR (Next.js)尝试使用 SWR (Next.js) 获取 API 时出错
【发布时间】：2021-02-10 07:24:49
【问题描述】：

我从 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，没有遇到任何问题。

【问题讨论】：

实际错误说明了什么？
@Nonik "未处理的运行时错误。TypeError: 数据未定义"
暂时把你最后的return修改成<div></div>这样简单的东西，然后在return之前设置一个断点或者console.log(data)来看看里面的数据。
@nghiaht 控制台显示有关 CORS 标头的错误：“原因：CORS 标头 'Access-Control-Allow-Origin' 缺失”。我猜应该是加在后端
但是后端是“api.github.com/repos/vercel/swr”，好像很奇怪

标签： reactjs next.js swr

【解决方案1】：

我个人处理它就像this example

useRequest.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
      }
    }
  )
}

sample.jsx：

  import useRequest from '../libs/useRequest'

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

【讨论】：