问题描述
我想要什么
问题
pages
[app]
[object]
index.js
index.js
manager.js
Feed.js
我在此路径 /[app]
并导航到 /[app]/manager
,然后我想导航到 /[app]/Feed
并且我收到此未处理的运行时错误。 >
TypeError: Cannot read property "title" of undefined
此错误来自 [object] index.js
。堆栈跟踪在下面。当然,它无法读取标题是有道理的,因为我正在尝试打开另一个页面。然而它认为我正在尝试打开 [object]
。
这个错误不时发生,但我尝试打开页面的顺序无关紧要,可以是经理提供或提供给经理,或者我在那里拥有的任何其他内容。
我的 getStaticPaths
和 getStaticProps
在所有这些页面上都是一样的,我将与 manager.js
共享一个。
export const getStaticPaths = async () => {
const paths = appRoutes.map((appRoute) => {
const slug = appRoute.slug;
return {
params: {
app: slug,manager: 'manager',},};
});
return {
fallback: false,paths,};
};
export const getStaticProps = async ({ locale }) => {
return {
props: {
...(await serverSideTranslations(locale,['manager','common'])),};
};
同样如此,但对于 [object]
:
export const getStaticPaths = async () => {
const allObjects = await loadobjectData({ id: 'all' });
const paths = allObjects.flatMap((object) => {
return appRoutes.map((appRoute) => {
return {
params: {
object: object.type,app: appRoute.slug,};
});
});
return {
fallback: false,};
};
export const getStaticProps = async ({ params,locale }) => {
const object = await loadobjectData({ type: params.object });
const app = appRoutes.find((appRoute) => appRoute?.slug === params.app);
if (!object) {
throw new Error(
`${object} is not a valid Object. Try checking out your parameters: ${params.object}`
);
}
if (!app) {
throw new Error(`${app} is not a valid App.`);
}
return {
props: {
...(await serverSideTranslation(locale,['common'])),object,app,};
};
这个错误很难重现,因为它只是偶尔发生。
新编辑
这是[object]/index.js
的完整文件
import appRoutes from '../../../routes/appRoutes';
import loadobjectData from '../../../utils/loadobjects';
import { serverSideTranslation } from 'next-i18next/serverSideTranslations';
export default function ObjectPage({ object }) {
return <h1> {object.title} </h1>;
}
export const getStaticPaths = async () => {
const allObjects = await loadobjectData({ id: 'all' });
const paths = allObjects.flatMap((object) => {
return appRoutes.map((appRoute) => {
return {
params: {
object: object.type,};
};
堆栈跟踪:
ObjectPage: index.js:6 Uncaught TypeError: Cannot read property 'title' of undefined
at ObjectPage (http://localhost:3000/_next/static/chunks/pages/%5Bapp%5D/%5Bobject%5D.js:3733:21)
at div
at Grid (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:13654:35)
at WithStyles (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:179881:31)
at div
at StyledComponent (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:179652:28)
at div
at ProjectSelectionStore (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:234820:77)
at Layout (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:278:23)
at TaskStore (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:235454:77)
at UserDocumentStore (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:235663:77)
at Stonestore (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:235119:77)
at StoreMall (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:409:23)
at ThemeProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:178584:24)
at App (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:234333:24)
at I18nextProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1624290251377:224427:19)
at AppWithTranslation
at ErrorBoundary (http://localhost:3000/_next/static/chunks/main.js?ts=1624290251377:146:47)
at ReactDevOverlay (http://localhost:3000/_next/static/chunks/main.js?ts=1624290251377:250:23)
at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1624290251377:8662:5)
at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1624290251377:9151:24)
at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1624290251377:9282:24)
25.06.2021
所以我从 ObjectPage
和每个 NavigationItem
控制台记录了路由器。我注意到了一些奇怪的事情。
这是我传递给 <Link>
的 href:
{
pathname: "/[app]/[menuItem]"
query: {
app: "content"
menuItem: "files"
}
}
这是我在 ObjectPage
上返回的完整路由器。
{
asPath: "/content/editor" // this the path i want to open
back: ƒ ()
basePath: ""
beforePopState: ƒ ()
components: {
"/[app]/[object]": {styleSheets: Array(0),__N_SSG: true,__N_ssp: undefined,props: {…},Component: ƒ}
"/[app]/editor": {initial: true,err: undefined,Component: ƒ,…}
"/_app": {styleSheets: Array(0),Component: ƒ}
}
defaultLocale: "de"
events: {on: ƒ,off: ƒ,emit: ƒ}
isFallback: false
isLocaleDomain: false
isPreview: false
isReady: true
locale: "de"
locales: ["de"]
pathname: "/[app]/[object]" // [object] is being loaded
prefetch: ƒ ()
push: ƒ ()
query: {app: "content",menuItem: "editor",object: "editor"} // this is interesting
reload: ƒ ()
replace: ƒ ()
route: "/[app]/[object]" // same as pathname
}
在 query
中,您可以看到 object
被注入。但我不知道从哪里以及为什么。
解决方法
我有这个代码:
{
pathname: "/[app]/[menuItem]"
query: {
app: "content"
menuItem: "files"
}
}
这是不正确的,因为没有到 [menuItem]
的动态路径。所以我写了:
{
pathname: "/[app]/files"
query: {
app: "content"
}
}
解决了我遇到的问题。
我误解了参数的文档。