小编Leo*_*Leo的帖子

我正在尝试使用 getStaticProps 和 next js 从 api 获取一些数据。它返回错误 undefined cannot be serialized as JSON. Please usenull` 或省略此值。

我已经根据网上提出的有关该主题的解决方案修改了代码，但它们都不起作用。

export async function getStaticProps() {
  const propertyForSale = await fetchApi(`${baseUrl}/properties/list?locationExternalIDs=5002&purpose=for-sale&hitsPerPage=6`);
  
  const propertyForRent = await fetchApi(`${baseUrl}/properties/list?locationExternalIDs=5002&purpose=for-rent&hitsPerPage=6`);

  return {
    props: {
      // Initial code
      propertyForSale: propertyForSale?.hits,
      propertyForRent: propertyForRent?.hits,
      
      // the below snippet fixes the issue but return null
      // propertyForSale: propertyForSale?.hits ?? null,
      //propertyForRent: propertyForRent?.hits ?? null,

     //the below snippet fixes the issue but return Unexpected token u in JSON at position 0 …

当我在应用程序中使用 next/link 时，我遇到了一些问题。

我有一个可重用的组件来呈现按钮。该组件在页面上使用两次，每次使用不同的 url。

当页面处于桌面视图时，该按钮可以正常工作。我可以从一个页面导航到另一页面。当我将屏幕尺寸缩小到平板电脑或移动设备时，其中一个会正确重定向，而另一个则不会按预期响应。

为了解决这个问题，我将该区域包含在链接内，以便用户可以单击按钮区域之外，但仍然会被定向到该页面，但这并不是我真正想要向用户提供的体验。

我以前从未有过这个。有人可以告诉我如何解决这个问题或者为什么会出现这种情况吗？谢谢。

const Banner = ({
  purpose,
  imageUrl,
  title1,
  title2,
  desc1,
  linkName,
  buttonText,
}) => {
  return (
    <div className="row flex-lg-row-reverse align-items-center g-5  justify-content-center">
      <div className=" col-10 col-sm-8 col-lg-6">
        <Image
          className="d-block img-fluid mx-lg-auto"
          src={imageUrl}
          width={700}
          height={500}
          alt="banner"
          loader={myLoader}
        />
      </div>
      <Link href={linkName} passHref>
        <div className="col-lg-4 p-3 text-center text-lg-start border-0">
          <h1 className="display-6 fw-bold lh-1 mb-3">{purpose}</h1>
          <p className="lead">
            {title1}
            <br /> {title2}
          </p>
          <p className="lead">{desc1}</p>

          <button className="btn link btn-primary btn-xl w-100">
            <Link href={linkName} passHref>
              <a> {buttonText}</a> …