在 NextJS 中显示多条 JSON 条记录

Question

在 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 数据访问？

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

Answer 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>

在 NextJS 中显示多条 JSON 条记录

Display multiple JSON records in NextJS

javascript

json

reactjs

nextjs