我没有从 api 获取数据。我需要从 API 获取数据答案

【问题标题】：I did not get data from the api. I need fetch data from API我没有从 api 获取数据。我需要从 API 获取数据
【发布时间】：2023-02-22 22:04:01
【问题描述】：

import { GetServerSideProps, NextPage } from 'next';
import Image from 'next/image';
import React from 'react';
import photo from '../../assets/photo.jpg';

type Products = {
    data?: {
      id: number;
      title: string;
      body: string;
    }[];
  };
  
  const defaultProducts: Products = {
    data: [],
  };

const ExploreProducts: NextPage<Products> = ({ data = defaultProducts.data }) => {
  console.log(data);

  return (
    <div>
      <div className='grid grid-cols-12 gap-5'>
        {data?.map(product => (
          <div className="card w-96 bg-base-100 shadow-xl" key={product.id}>
            <figure className="px-10 pt-10">
              <Image src={photo} alt="Shoes" className="rounded-xl" />
            </figure>
            <div className="card-body items-center text-center">
              <h2 className="card-title">{product.title}</h2>
              <p>{product.body}</p>
              <div className="card-actions">
                <button className="btn btn-primary">Buy Now</button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export const getServerSideProps: GetServerSideProps<Products> = async () => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await response.json();
    console.log(data); // Verify that data is being fetched correctly
    return {
      props: {
        data,
      },
    };
  } catch (error) {
    console.error(error);
    return {
      props: {
        data: [],
      },
    };
  }
};

export default ExploreProducts;

这是我的整个组件，我正在尝试从 jsonplaceholder 获取数据，但数据未定义或数组为 0。我无法理解这段代码中的问题。我正在尝试从 api 获取数据。但我得到未定义的数据或数组为 0。我不明白发生了什么。我的代码有什么问题。请查看这段代码并告诉我这段代码有什么问题。

我期待来自 API 的数据想要显示在 UI 中。

【问题讨论】：

标签： javascript reactjs next.js nextjs13 getserversideprops

【解决方案1】：

您似乎正在尝试从 https://jsonplaceholder.typicode.com/posts API 端点获取数据并使用 Next.js 在 UI 上显示它。

getServerSideProps 函数正确地从 API 获取数据并将其作为 props 传递给 ExploreProducts 组件。但是，您访问组件中数据的方式存在错误。

您应该通过 props 对象的数据属性访问它，而不是直接访问 Products 类型的数据属性，如下所示：

const ExploreProducts: NextPage<Products> = ({ data }) => {
  console.log(data);
  return (
    // ...
  );
};

此外，在调用 map 函数之前，请确保数据属性是一个数组。您可以像这样添加支票：

{data && data.length > 0 && data.map(product => (
  // ...
))}

这将确保 map 函数仅在有可用数据时被调用。现在代码应该可以正常工作并显示来自 API 的数据。

【讨论】：

【解决方案2】：

您的代码是正确的，您的代码没有问题，可以正常工作。我在 GitHub 代码空间中尝试过，效果很好。参考下面的SS。

【讨论】：