如何访问从 props 返回的数据

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 return 数据是这样的

[
    {
      "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} 放在你的地图函数中，而是像这样传递事件（事件）然后你将有 even.name 和 event.is 并且你将有 event.venue.id 和event.venue.name

Answer 2

在你的地图中，而不是 ({venue}) => 只是做 (item) => 你的问题是你正在获取每个元素并且只从中提取场地而不是整个元素。一旦你有了项目，你可以说 item.id、item.venue 等

如何访问从 props 返回的数据

How to access data returned from props

reactjs

next.js