Unhandled Runtime Error Error: Cannot read properties of undefined (reading 'map')

Question

我正在使用 Next.js 开发 Django Rest Framework，但我无法从 API 获取数据。我在这个网址中有数据

http://127.0.0.1:8000/api/campaigns

，当我访问该网址时，我会看到数据。

问题是当我使用 Next.js 获取和控制数据时，我得到了

undefined

。另外，当我尝试映射数据时，出现错误：

未处理的运行时错误 错误：无法读取未定义的属性（读取“地图”）

这是我的

Index.js

文件，其中完成了数据获取：

import React from 'react'

export default function Index ({data}) {
  console.log(data)
  return (
    <div>
      <main>
        <h1>Available Campaigns</h1>
        {data.map((element) => <div key={element.slug}>
          <div>
            <div>
              <img src={element.logo} height={120} width={100} alt="image" />
            </div>
            <div></div>
          </div>

        </div>)}
      </main>
    </div>
  );
}

export async function getStaticProps() {
  const response = await fetch("http://127.0.0.1:8000/api/campaigns");
  const data = await response.json();
  return {
    props: {
      data: data
    },
  }
}

这里是我访问 URL 时得到的数据的截图：

这是前端内 Next.js 应用程序的文件结构：

另外，请注意我使用的是最新版本的 Next.js。任何帮助将不胜感激。谢谢。

Answer 1

getStaticProps

仅适用于

pages

文件夹内的页面组件。 这是doc所说的：

getStaticProps

只能从页面导出。您 cannot 从非页面文件、

_app

、

_document

或

_error

导出它。

虽然您似乎正在使用

app

目录。我们有Server Components，您可以在其中直接在组件主体中获取数据。在你的情况下，它会是这样的：

async function getCampaigns() {
  const response = await fetch("http://127.0.0.1:8000/api/campaigns");
  const data = await response.json();
  return data;
}

export default async function Index() {
  const data = await getCampaigns();
  return (
    <div>
      <main>
        <h1>Available Campaigns</h1>
        {data.map((element) => (
          <div key={element.slug}>
            <div>
              <div>
                <img src={element.logo} height={120} width={100} alt="image" />
              </div>
              <div></div>
            </div>
          </div>
        ))}
      </main>
    </div>
  );
}