如何访问从 props 返回的数据

Posted 2023-03-30

【中文标题】如何访问从 props 返回的数据

【英文标题】：How to access data returned from props

【发布时间】：2019-02-06 03:41:30

【问题描述】：

我是 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 和名称。

【问题讨论】：

当您尝试您的代码时会发生什么？有错误吗？如果您在地图中使用控制台登录“地点”，则其中有什么？

我可以正常进入会场。但是当我无法访问名称（测试事件）时。它说名称未定义。

【参考方案1】：

在您的地图中，而不是 (venue) => 只需执行 (item) => 您的问题是您正在获取每个元素并且只从中提取场地而不是整个元素。拥有项目后，您可以说 item.id、item.venue 等。

【讨论】：

感谢您的帮助。有效。它是如此简单，我花了一个小时。

如果这个答案帮助您解决了问题，您应该点赞或标记为已解决，以真正感谢帮助您的人。

【参考方案2】：

你不应该把 venue 放在你的 map 函数中，而是像这样传递事件（event）然后你将拥有 even.name 和 event.is，你将拥有 event.venue.id 和 event.venue.name