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

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

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记录

1 个答案: