Next.js调用自定义API无数据返回问题求助

1. 修正数据传递逻辑 #

你调用Rick and Morty API时，因为接口返回的是包含results数组的对象，所以代码里会取data.results传给组件；但自定义API直接返回数组，若你仍沿用data.results的写法，会拿到undefined，导致前端无数据。

对比调整代码：

• 原Rick and Morty API调用（正常逻辑）：

  export async function getServerSideProps() {
    const res = await fetch('https://rickandmortyapi.com/api/character');
    const data = await res.json();
    return { props: { characters: data.results } };
  }
  

• 自定义API调用修正：

  export async function getServerSideProps() {
    const res = await fetch('你的自定义API地址');
    const data = await res.json();
    // 直接传递返回的数组给组件
    return { props: { items: data } };
  }
  

2. 同步组件渲染逻辑 #

组件里要确保遍历的是正确的props字段。比如之前遍历characters，现在要换成自定义API传递的items：

export default function MyComponent({ items }) {
  return (
    <div>
      {items.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

注意：如果自定义API返回的数组对象没有id，要替换成其他唯一字段作为key，避免React警告。

3. 验证字段匹配性 #

打印自定义API响应时，确认数组内每个对象的字段和组件渲染时用到的字段一致。比如组件里用item.name，就要确保自定义API返回的对象包含name字段，否则会显示空值或undefined。

4. 增加容错处理 #

在组件中添加判断，避免数组为空或未定义时渲染出错：

export default function MyComponent({ items }) {
  if (!items || items.length === 0) {
    return <div>暂无数据</div>;
  }
  return (
    <div>
      {items.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Mi Yahn