Блог

Главная - Вопросы по программированию - Next.js использование SWR с axios

Next.js использование SWR с axios

#reactjs #axios #next.js #swr

Вопрос:

Я пытаюсь использовать SWR для предварительной выборки данных в своем проекте. Вот мой код:

 export const getStaticProps = async (res) => {
  const result = await axios.get(
    `/orders/detail/${res.params.cid}/${res.params.oid}`
  );
  const orderDetailById = await result.data;

  return {
    props: { orderDetailById },
  };
};

export const getStaticPaths = async () => {
  const result = await fetch(`${server}/api/orders`);

  const orders = await result.json();

  const ids = orders.map((order_detail) => ({
    oid: order_detail.oid,
    cid: order_detail.cid,
  }));
  const paths = ids.map((id) => ({
    params: { oid: id.oid.toString(), cid: id.cid.toString() },
  }));
  return {
    paths,
    fallback: false,
  };
};

const fetcher = (url, params) => {
  return fetch(url   params.cid   '/'   params.oid).then((r) => r.json());
};

const OrderDetailByOId = ({ orderDetailById }) => {
  const cid = orderDetailById.customer[0].cid;
  const oid = orderDetailById.detail[0].oid;

  const params = useMemo(() => ({ cid, oid }), [cid, oid]);

  const { data, error } = useSWR(['/orders/detail/', params], fetcher, {
    initialData: orderDetailById,
  });

  if (error) {
    console.log('errorHere', error);
    return <div>failed to load</div>;
  }
  if (!data) return <div>Loading...</div>;
  return <OrderDetailForm orderDetailById={orderDetailById} />;
};

export default OrderDetailByOId;

Это хорошо работает при первом рендеринге.
В то же время я не изменил никаких данных в своей базе данных,
поэтому, когда она отображается во второй раз, refreshInterval:1000 это ничего не изменит, но она выскочила с некоторыми ошибками!

errorHere SyntaxError: Unexpected token < in JSON at position 0

Когда я впервые увидел ошибку, я догадался, что это просто какие-то проблемы с JSON, поэтому я изменил возврат выборки, например (r)=>r.data

После того, как я изменил это, это заставило сеть вернуться loading... , это означает, что она ничего не извлекла во втором рендеринге или даже в каждом после первого рендеринга.

Кто-нибудь может помочь мне выяснить, какие проблемы вызвали ошибки. Спасибо~

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

1. Является ли запрос внутри fetcher указывающим на правильный URL-адрес? Разве useSWR ключ не должен быть /api/orders/detail/ ?

2. @juliomalves Спасибо, что указали на меня!!! ~ Я забыл, что написал это Axios.defaults.baseURL = server '/api'; в _app.js . Поэтому я изменил его на axios.get() и верните r.data обратно, теперь он работает нормально~~ Хотите ответить ниже, и я дам вам зеленый чек~

Ответ №1:

Я забыл, что установил базовый URL Axios, например Axios.defaults.baseURL = server '/api';

поэтому я изменил возврат отправителя, как return axios.get(url params.cid '/' params.oid).then((r) => r.data);

Это работает для меня сейчас~ Спасибо, что @juliomalves указал мне, где может быть проблема ~ Спасибо!

Метки: