Блог

Главная - Вопросы по программированию - Ошибка при попытке получить API с помощью SWR (Next.js )

Ошибка при попытке получить API с помощью SWR (Next.js )

#reactjs #next.js #swr

#reactjs #next.js #swr

Вопрос:

Я успешно запускаю следующий код со страницы примеров 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 в других частях проекта, и у меня не было проблем.

Комментарии:

1. что говорит фактическая ошибка?

2. @Nonik «Необработанная ошибка времени выполнения. Ошибка типа: данные не определены »

3. Временно измените свой last return на что-то простое, например <div></div> , затем установите точку останова или console.log(data) перед return , чтобы увидеть, что находится внутри данных.

4. Консоль @nghiaht показывает ошибку, касающуюся заголовка CORS: «Причина: отсутствует заголовок CORS ‘Access-Control-Allow-Origin'». Я думаю, это должно быть добавлено в серверную часть

5. Но серверная часть » api.github.com/repos/vercel/swr «, это кажется странным

Ответ №1:

Я лично обрабатываю это как этот пример

useRequest.js:

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

export default function useRequest(request, { initialData, ...config } = {}) {
  return useSWR(
    request amp;amp; JSON.stringify(request),
    () => axios(request || {}).then(response => response.data),
    {
      ...config,
      initialData: initialData amp;amp; {
        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'
  })