我是 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
,但没有帮助。
我有:
const getTickets = async () => {
try {
const res = await fetch("http://localhost:3000/api/Tickets/", {
cache: "no-store",
});
return res.json();
} catch (error) {
console.log("Failed to get tickets.", error);
}
};
工作完全正常,我使用此功能来显示所有门票。很奇怪,函数 getTicketById() 不起作用。
您可以使用可选链接来确保在访问属性之前通过ID获取的文件存在:
updateTicketData = await getTicketById(params.id);
updateTicketData = updateTicketData?.foundTicket;
如果
undefined
不存在,则应将 updateTicketData
放入 updateTicketData
中
我认为“getTicketById”函数中的所有内容都工作正常。我认为问题在于,如果数据不采用 JSON 格式,我们就无法将数据从 RSC 传递到组件。您可以尝试以下方法:
else {
const data = await getTicketById(params.id);
updateTicketData = JSON.parse(JSON.stringfy(updateTicketData));
}
希望,它有效。