我正在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函数更改？
答案 0 :(得分：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除去花括号应该可以解决问题。