2

我正在尝试使用 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 问题，所以我更改了 fetcher 的返回值(r)=>r.data

在我更改此设置后，它导致网络返回loading... 这意味着它在第二次渲染中甚至在第一次渲染之后都没有获取任何内容。

有没有人可以帮助我找出导致错误的问题。谢谢~

4

1 回答 1

0

我忘了我已经设置了 Axios 的基本 URL，比如Axios.defaults.baseURL = server + '/api';

所以我改变了提取器返回 return axios.get(url + params.cid + '/' + params.oid).then((r) => r.data);

它现在对我有用~感谢@juliomalves 指出我可能有问题的地方~谢谢！

于 2021-07-22T05:47:38.043 回答