TypeError: 在使用NextJS 13.4进行AirTable API调用时无法读取未定义的属性。

huangapple go评论83阅读模式
英文:

TypeError: Cannot read properties of undefined when making AirTable API call with NextJS 13.4

问题

我正在学习使用 NextJS 13.4 的新 App 路由器,但在尝试进行外部 API 调用时遇到了错误。

实际上,我从 Airtable 正确地接收到了所有数据,但由于 Next 抛出了这个错误,它导致了我的 try-catch 出现问题。我无法弄清楚是什么导致了这个错误,以及如何修复它。

以下是它抛出的错误信息:

- 错误 TypeError: 无法读取未定义的属性(读取 'headers')
    在 eval(webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:254:61)
    在 processTicksAndRejections(node:internal/process/task_queues:96:5)

我是从位于 /app/dashboard/page.js 的客户端组件中进行初始调用的。

page.js 大致如下:

'use client'

import React, { useEffect } from 'react';

const Dashboard = () => {

  useEffect(() => {

    async function fetchData() {
      try {
        const res = await fetch('/api/jobs', {
          method: 'GET',
          headers: {
            'id': '123'
          }
        });

        const data = await res.json();
        console.log("hello", data); // 我从未达到这个控制台日志,因为下面的 catch 捕捉了错误

      } catch (error) {
        console.log("error")
        console.log(error);
      }
    };

    fetchData();
  }, []);
  
  return (
    <div>
      你好,世界
    </div>
  );
}

export default Dashboard;

然后,我在 /app/api/jobs/route.js 中有我的处理程序。

route.js 大致如下:

import { NextResponse } from 'next/server';
import { jobs } from "../../../utils/Airtable";
 
export async function GET(req) {

  let headers = await req.headers.get('id'); // 这很好地记录了标头

  let recordsArr = [];

  try {
        jobs.select({
            view: 'Grid view',
            fields: ['Project Lead'],
            filterByFormula: `AND({Project Lead} = 'Jane Doe', AND({Created Day}, '6/1/23'))`
        }).eachPage(function page(records, fetchNextPage) {
                recordsArr.push(...records);
                
                try {
                    fetchNextPage();
                } catch (err) {
                    console.log(err)
                    return;
                };
            }, function done(err) { 

                if (err) {
                    return new NextResponse(JSON.stringify({message: 'Error'})) 
                };

                console.log(recordsArr) // 这完美地记录了记录
                return new NextResponse(JSON.stringify(recordsArr));
        });

    } catch (err) {

        return new NextResponse(JSON.stringify({message: 'Error'}), { status: 500 })

    };

  return new NextResponse(JSON.stringify(obj), { status: 200 });
}

一旦我注释掉 Airtable API 调用,就不再收到错误。

如果我将整个 Airtable API 调用移到客户端组件中,它就可以无缝运行。所以我认为有关 NextJS 我还没有理解的一些事情。

感谢您的时间。

英文:

I'm learning the new App router using NextJS 13.4 and have come across an error when attempting to make an external api call.

I actually receive all of the data properly from Airtable but because Next throws this error it causes my try catch to break. I cannot for the life of me figure out what is throwing this error and how to fix it.

Here is the error it is throwing:

- error TypeError: Cannot read properties of undefined (reading &#39;headers&#39;)
    at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:254:61)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

I am making the initial call from a client component located at /app/dashboard/page.js.

page.js looks something like this:

&#39;use client&#39;

import React, { useEffect } from &#39;react&#39;;

const Dashboard = () =&gt; {

  useEffect(() =&gt; {

    async function fetchData() {
      try {
        const res = await fetch(&#39;/api/jobs&#39;, {
          method: &#39;GET&#39;,
          headers: {
            &#39;id&#39;: &#39;123&#39;
          }
        });

        const data = await res.json();
        console.log(&quot;hello&quot;, data); // I never hit this console log because the catch below catches the error

      } catch (error) {
        console.log(&quot;error&quot;)
        console.log(error);
      }
    };

    fetchData();
  }, []);
  
  return (
    &lt;div&gt;
      Hello World
    &lt;/div&gt;
  );
}

export default Dashboard;

Then I have my handler located at /app/api/jobs/route.js

route.js looks something like this:

import { NextResponse } from &#39;next/server&#39;;
import { jobs } from &quot;../../../utils/Airtable&quot;;
 
export async function GET(req) {

  let headers = await req.headers.get(&#39;id&#39;); // this logs out the headers just fine

  let recordsArr = [];

  try {
        jobs.select({
            view: &#39;Grid view&#39;,
            fields: [&#39;Project Lead&#39;],
            filterByFormula: `AND({Project Lead} = &#39;Jane Doe&#39;, AND({Created Day}, &#39;6/1/23&#39;))`
        }).eachPage(function page(records, fetchNextPage) {
                recordsArr.push(...records);
                
                try {
                    fetchNextPage();
                } catch (err) {
                    console.log(err)
                    return;
                };
            }, function done(err) { 

                if (err) {
                    return new NextResponse(JSON.stringify({message: &#39;Error&#39;})) 
                };

                console.log(recordsArr) // this logs out the records perfectly
                return new NextResponse(JSON.stringify(recordsArr));
        });

    } catch (err) {

        return new NextResponse(JSON.stringify({message: &#39;Error&#39;}), { status: 500 })

    };

  return new NextResponse(JSON.stringify(obj), { status: 200 });
}

As soon as I comment out the Airtable api call I stop getting the error.

If I move the entire Airtable API call to the client component it works flawlessly. So I think there is something about NextJS that I'm not comprehending.

Appreciate your time.

答案1

得分: 0

你需要为该 ID 使用自定义标头吗?

https://nextjs.org/docs/pages/api-reference/next-config-js/headers

英文:

Could it be that you need to use a custom header for that Id?

https://nextjs.org/docs/pages/api-reference/next-config-js/headers

答案2

得分: 0

我理解你的情况,我之前遇到过完全相同的问题。花了我几个小时才找到问题所在,但最终我找到了解决办法。

你的代码问题在于在返回语句中不必要地使用了 new 关键字。你当前使用了这一行:

return new NextResponse(JSON.stringify(recordsArr));

所以,你应该改为:

return NextResponse(JSON.stringify(recordsArr));

在我的情况下,去掉 new 关键字就足以解决问题。

如果你仍然遇到困难,可以尝试使用较小的代码片段进行调试,或者隔离代码的不同部分,以确定问题的根源。

希望这能解决你的问题!

英文:

I empathize with your situation as I faced the exact same issue a while ago. It took me a couple of hours to pinpoint the problem, but eventually I found the solution.

The issue with your code is the unnecessary use of the new keyword in your return statement. You're currently using this line:

return new NextResponse(JSON.stringify(recordsArr));

So, what you should be doing instead is:

return NextResponse(JSON.stringify(recordsArr));

In my case, removing the new keyword was enough to resolve the issue.

If you're still having trouble, it could be beneficial to debug with a smaller piece of code or to isolate different parts of your code to pinpoint where the problem is originating from.

I hope this resolves your issue!

huangapple
  • 本文由 发表于 2023年6月2日 07:03:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/76386215.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定