下一个 js react app fetch not defined 错误

Posted 2023-02-22

【中文标题】下一个 js react app fetch not defined 错误

【英文标题】：next js react app fetch not defined error

【发布时间】：2019-04-27 08:37:12

【问题描述】：

我正在尝试克隆以下 next.js react 应用并在 localhost:3000 上运行它

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

当我打开 localhost:3000 时出现以下错误

未处理的拒绝（ReferenceError）：未定义提取 函数._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';

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

干杯

【问题讨论】：

那个答案怎么样：***.com/questions/36484156/es6-fetch-is-undefined

感谢好友的回复。错误消失了，尽管当我点击蝙蝠侠链接时，我得到“404 找不到此页面。”所以提取不起作用，知道为什么吗？

抓取工作正常。您遇到的问题是，当您单击蝙蝠侠链接时，您会被重定向到应用程序上不存在的页面。那行是错误的<Link as=`/p/$show.id` href=`/post?id=$show.id`>

【参考方案1】：

如果您转到examples 此处的示例并搜索fetch，您将看到它们在使用什么。在示例中是node-fetch - node-fetch

【参考方案2】：

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

【讨论】：

感谢您的回复；我尝试安装软件包。我仍然遇到同样的错误

... 这更像是评论而不是答案（特别是因为它似乎没有解决 OP 的问题）。

【参考方案3】：

fetch 是 浏览器 中的预定义 方法，但您的函数在服务器端工作，所以它不起作用。

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

之后，在您想使用fetch 方法的任何地方使用unfetch 方法。

PS： 在 Next.JS 的较新版本（10.0.0 及更高版本）中，您应该不会看到此问题。