NEXT.js同构不匹配出错

Question

我正在做以下关于Next.js远程获取的练习。我无法理解和适应的是，该练习从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}中删除大括号就可以了。