javascript - NEXT.js 同构-unfetch 出错

Question

我正在 Next.js remote fetching 上做以下练习。我无法理解和适应的是练习从 http://api.tvmaze.com 获取数据。 .

数据如下:

[
 {"score":24,"show":{"id":975,"url":"", "name":""}}
,{"score":25,"show":{"id":976,"url":"", "name":""}}
,{"score":26,"show":{"id":977,"url":"", "name":""}}
]

索引页使用以下映射:

{props.shows.map(({show}) => (
        <li key={show.id}>
          <Link as={'/p/${show.id}'} href={'/post?id=${show.id}'}>
            <a>{show.name}</a>
          </Link>
        </li>
      ))}

注意，它具有 {"score":"", "show":{}} 结构。因此，props.shows.map 使用变量 show 并引用 show.id 和 show.name 。而且效果很好。我很困惑不明白它是如何工作的？因为 id 位于内部，对我来说它应该是 show.show.id。

此外，我正在尝试获取结构略有不同的不同数据源。

[
 {"id": 1, "name":"name1"}
,{"id": 2, "name":"name2"}
,{"id": 3, "name":"name3"}
]

相同的代码失败并出现错误:

Unhandled Rejection (TypeError): Cannot read property 'id' of undefined

因此，除了它具有明显不同的数据结构之外。我无法理解为什么，如果我的数据结构略有不同，我该如何相应地改变props.shows.map函数？

Answer 1

你熟悉JS中的对象解构吗？ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

在示例中，编写 ({show}) 是编写诸如 (resp) 之类的简写，然后编写 show = resp.show。因此，在这种情况下，由于解构，show 已经成为show 对象。因此，id 有效。

您的数据没有 show 属性，因此解构时，show 未定义。当然，您无法获取 undefined 的属性。从 {show} 中删除大括号应该可以解决问题。