我是 nextjs 和 react 的新手。我正在使用 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 和名称。