Reactjs 如何访问props返回的数据

我是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
  };
};

---

我可以通过props.eventList.map功能访问场馆详细信息，但无法访问id和名称。

您不应该将{venture}放在地图功能中，而是像这样通过活动（event），然后您将拥有event.name和event.is，您的地图中将有event.venture.id和event.venture.name，而不是（{venture}）=>只需执行（项目）=>您的问题是获取每个元素，并且只从中提取场地，而不是整个元素。一旦你有了物品，你就可以说item.id、item.vention等。

当你尝试你的代码时会发生什么？有错误吗？在地图中，如果你登录“场馆”，里面有什么？我可以很好地访问场馆。但是当我无法访问名称（测试事件）时。上面说名字没有定义。谢谢你的帮助。成功了。这很简单，我花了一个小时在上面。如果这个答案帮助你解决了你的问题，你应该投票表决或者把它标记为已解决，以真正感谢帮助你的人。

[
    {
      "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",
      }
    }
]