“TypeError：无法读取未定义的属性（读取'foundTicket'）”在我的next.js应用程序中，代码似乎没有问题

Question

我是 next.js 的新手，正在跟随 YouTuber 制作这个项目，在这里你可以找到我的代码：https://github.com/Fanguiee/ticketing-app/tree/edit-existing-item 或者您也可以阅读下面的内容。提前致谢:)

截图： 文字错误：

 ⨯ app\TicketPage\[id]\page.jsx (30:40) @ foundTicket
 ⨯ TypeError: Cannot read properties of undefined (reading 'foundTicket')
    at TicketPage (./app/TicketPage/[id]/page.jsx:35:45)
  28 |   } else {
  29 |     updateTicketData = await getTicketById(params.id);
> 30 |     updateTicketData = updateTicketData.foundTicket;
     |                                        ^
  31 |   }
  32 |   return <TicketForm ticket={updateTicketData} />;
  33 | };

app\TicketPage[id]\page.jsx:

import TicketForm from "@/app/(components)/TicketForm";

const getTicketById = async (id) => {
  try {
    const res = await fetch(`http://localhost:3000/api/Tickets/${id}`, {
      method: "GET",
      cache: "no-store",
    });

    if (!res.ok) {
      throw new Error(`Failed to fetch Ticket by id ${id} .`);
    }
    console.log("Ah!");
    console.log(res);
    return res.json();
  } catch (error) {
    console.log(error);
  }
};

const TicketPage = async ({ params }) => {
  const EDITMODE = params.id === "new" ? false : true; //Tickecpage/new or TicketPage/123?
  let updateTicketData = {};
  if (!EDITMODE) {
    updateTicketData = {
      _id: "new",
    };
  } else {
    updateTicketData = await getTicketById(params.id);
    updateTicketData = updateTicketData.foundTicket;
  }
  return <TicketForm ticket={updateTicketData} />;
};

export default TicketPage;

应用程序 pi\门票[id] oute.js:

import TicketForm from "@/app/(components)/TicketForm";

const getTicketById = async (id) => {
  try {
    const res = await fetch(`http://localhost:3000/api/Tickets/${id}`, {
      method: "GET",
      cache: "no-store",
    });

    if (!res.ok) {
      throw new Error(`Failed to fetch Ticket by id ${id} .`);
    }
    console.log("Ah!");
    console.log(res);
    return res.json();
  } catch (error) {
    console.log(error);
  }
};

const TicketPage = async ({ params }) => {
  const EDITMODE = params.id === "new" ? false : true; //Tickecpage/new or TicketPage/123?
  let updateTicketData = {};
  if (!EDITMODE) {
    updateTicketData = {
      _id: "new",
    };
  } else {
    updateTicketData = await getTicketById(params.id);
    updateTicketData = updateTicketData.foundTicket;
  }
  return <TicketForm ticket={updateTicketData} />;
};

export default TicketPage;

我有node.js：v18.16.0，更新时遇到问题:(也许这是问题所在？

package.json：

{
  "name": "ticketing-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "autoprefixer": "10.4.16",
    "eslint": "8.52.0",
    "eslint-config-next": "^14.0.0",
    "mongodb": "^6.2.0",
    "mongoose": "^7.6.3",
    "next": "^13.0.8",
    "postcss": "8.4.31",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "3.3.5"
  }
}

首先我使用 next.js 14.0.0，然后在阅读帖子后尝试旧版本类型错误：无法读取 Next.js 上未定义的属性（读取“调用”）

（package.json中的next.js 13.0.8（但不知何故实际版本是Next.js v13.5.6）。我从他那里了解到这个项目的Youtuber使用了“next”：“13.4.13”，我应该尝试一下吗也许是版本？？）

我也尝试过

npm install next@canary

，但没有帮助。

Answer 1

您可以使用可选链接来确保在访问属性之前通过ID获取的文件存在：

updateTicketData = await getTicketById(params.id);
updateTicketData = updateTicketData?.foundTicket;

如果

undefined

不存在，则应将

updateTicketData

放入

updateTicketData

中