Question

我是nextjs的新手，会做出反应。我正在使用nextjs从api获取数据并在视图中显示它。这是我的代码。

const Index = props => (
  <Layout>
    <h1>Events</h1>
    <ul>
      {props.eventList.map(({ venue }) => (
        <li key={venue.name}>
          <a>{venue.name}</a>
        </li>
      ))}
    </ul>
  </Layout>
);

Index.getInitialProps = async function() {
  const res = await fetch("api link here");
  let data = await res.json();
  console.log(`Show data fetched. Count: ${data.events.length}`);
  return {
    eventList: data.events
  };
};

现在我的api这样返回数据

[
    {
      "id": 4303920,
      "name": "Test Event",
      "venue": {
        "id": 1610,
        "name": "Eiffel Tower Viewing Deck at Paris Las Vegas",
      }
    },
    {
      "id": 4323,
      "name": "Test Event 2",
      "venue": {
        "id": 1610,
        "name": "Eiffel Tower Viewing Deck at Paris Las Vegas",
      }
    }
]

我可以通过props.eventList.map函数访问场馆详细信息，但不能访问ID和名称。

Answer 1

在地图中，而不是（{venue}）=>要做（item）=>，您的问题是获取每个元素，并且仅从其中提取场地，而不是整个元素。拥有物品后，您可以说出item.id，item.venue等。

Answer 2

您不应该在地图函数中放置{venue}，而是传递这样的事件（事件），那么您将拥有even.name和event.is，并且将拥有event.venue.id和event.venue.name < / p>

如何访问道具返回的数据

2 个答案: