Next.js React 应用程序中出现了 fetch 未定义错误。

Question

我正在尝试克隆以下的Next.js React应用程序，并在本地主机上运行它：localhost:3000

https://github.com/elee-ittdublin/lab6-nextjs

当我打开localhost:3000时，我遇到了以下错误：

未处理的拒绝（ReferenceError）：fetch未定义 Function._callee$ ./pages/index.js:22

20 | // see https://nextjs.org/learn/basics/fetching-data-for-pages
>22 | Index.getInitialProps = async function() {
24 |   const url = 'https://api.tvmaze.com/search/shows?q=batman';

我尝试研究我做错了什么，但我仍然无法解决我的问题。有人能看出我哪里错了吗？

谢谢

- Craig P H

---

关于这个问题怎么样：https://dev59.com/hVoV5IYBdhLWcg3wPs4Y - undefined

谢谢回复，伙计。虽然错误已经消失了，但是当我点击蝙蝠侠链接时，出现了“404 页面未找到”的提示。所以获取数据的功能没有起作用，你有什么想法吗？ - undefined

Fetch正在工作。您遇到的问题是，当您点击“蝙蝠侠”链接时，会被重定向到您应用程序中不存在的页面。那行代码是错误的： <Link as={`/p/${show.id}`} href={`/post?id=${show.id}`}> - undefined

Answer 1

如果您前往这里的示例examples并搜索fetch，您将看到他们正在使用的内容。在这些示例中使用了node-fetch - node-fetch。请注意保留HTML标签。

- gdfgdfg

Answer 2

fetch 是浏览器中的一个预定义方法，但是您的函数在服务器端运行，因此它无法工作。

有一个 npm 包基本上将浏览器的 fetch 和 node-fetch 结合在一起，它被命名为 isomorphic-unfetch，您可以通过命令 npm install isomorphic-unfetch 安装它。

之后，您可以在任何地方使用 unfetch 方法来使用 fetch 方法。 PS： 在 Next.JS 的更新版本（10.0.0 及以上版本）中，您不应该看到这个问题。

- eneski

Answer 3

可能包未安装。尝试安装https://www.npmjs.com/package/isomorphic-unfetch

- Jayanta Baishya

---

谢谢回复；我尝试安装这个包，但仍然遇到相同的错误。 - undefined

...这更像是一条评论而不是一个答案（尤其是因为它似乎没有解决提问者的问题）。 - undefined