在 NextJS 中显示多条 JSON 记录答案

【问题标题】：Display multiple JSON records in NextJS在 NextJS 中显示多条 JSON 记录
【发布时间】：2025-12-04 21:00:01
【问题描述】：

在 NextJS 教程中，我们展示了如何从地图中呈现蝙蝠侠节目名称列表。 Fetching Batman Shows

在那篇教程中有这个片段从地图中获取数据：

<ul>
  {props.shows.map(({show}) => (
    <li key={show.id}>
      <Link as={`/p/${show.id}`} href={`/post?id=${show.id}`}>
        <a>{show.name}</a>
      </Link>
    </li>
  ))}
</ul>

但如果 JSON 文档更简单，例如

[
 {
  "id":1,
  "text":"first doc",
 },
 {
  "id":2,
  "text":"second doc",
 }
]

您如何准备数据集（通过getInitialProps 调用获得）并从props 数据访问？

使用此示例数据，目标是构建一个包含 "text" 值的 HTML 列表。

【问题讨论】：

标签： javascript json reactjs nextjs

【解决方案1】：

从 React 文档React Lists and Keys 中我并不太明显。 map 函数适用于任何需要渲染的数组。

可以映射 JSON 记录的任何*元素。

  <ul>
  {props.mydata.map(({id, text}) => (
    <li key={id}>
      <Link as={`/p/${id}`} href={`/post?id=${id}`}>
        <a>{text}</a>
      </Link>
    </li>
  ))}
</ul>

【讨论】：