NEXT.js isomorphic-unfetch 出错了

Question

我正在 Next.js remote fetching. What I am not able to understand and adapt is the exercise fetches data from 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})是shorthand表示写(resp)，然后写show = resp.show。所以在这种情况下，由于解构，show 已经是 show 对象。因此，id 有效。

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

NEXT.js isomorphic-unfetch 出错了

NEXT.js isomorphic-unfetch errs out

javascript

next.js