接下来 js 当我单击 next/link 的 <Link> 时，在 _app.js 中调用了错误。关于数据获取

Question

您好:) 关于 next/link

的 _app.js 和 <Link>

- 问题（如标题）

当我单击 next/link 时，在 _app.js 中调用了错误。

关于错误是Can't Get Fetch Data如下所示。

但是，在点击（第一页）之前，这不会造成问题。

该数据是<Header>的数据，

所以我在_app.js（普通事物的容器）

中实现了getInitalProps()中的数据获取代码

因为我知道 _app.js 是常见的容器，像 <Header> 这样的常见事物总是呈现

甚至浏览其他 /pages/[location].. 但错误发生了..

我所知道的是错误的..？（或者功能 _app.js 问题？）

1。 root/pages/_app.js

// root/pages/_app.js
const App = ({ Component, pageProps, datas }) => {
    return (
        <div id="wrapper">
            <Provider store={store}>
                <Header data={datas} />
                <Component {...pageProps} />
                <Footer data={datas} />
            </Provider>
        </div>

    )
}

App.getInitialProps = async ({ Component, res, ctx }) => {

    let pageProps = {}
    let gnb_menu;
    console.log(Component.getInitialProps);
    if (Component.getInitialProps) {
        pageProps = await Component.getInitialProps(ctx)
        gnb_menu = await axios.get([data url something]);
    }
    return {
        pageProps,
        datas: gnb_menu.data.menu,
    }
}

export default App;

2。 root/src/components/header/Header.js

<Link
  href={`/category`}
  as={`/category`}
>

3。 root/pages/category/index.js

import React from 'react'
import { useRouter } from 'next/router'

const Content = () => {
    console.log('contentsss');
    const router = useRouter();
    const { id, content } = router.query

    return (
        <div>
            ca/contents
            <h1>{id}</h1>
            <h2>{content}</h2>
        </div>
    )
}

export default Content

感谢您的宝贵时间:)

Answer 1

您的 getInitialProps 函数允许在不初始化的情况下访问 gnb_menu。 gnb_menu 仅在定义了 Component.getInitialProps 时设置。如果不是，则 gnb_menu 将保持未定义状态，您将得到 Cannot read property 'data' of undefined 因为 gnb_menu.data.menu 无法处理。

尝试添加一个 console.log 如下所示，以了解您的 axios.get 调用返回了什么，或者它是否执行了它。这应该会提示您出了什么问题。

App.getInitialProps = async ({ Component, res, ctx }) => {
    let pageProps = {}
    let gnb_menu;
    console.log(Component.getInitialProps);   // <-- what did this display?
    if (Component.getInitialProps) {
        pageProps = await Component.getInitialProps(ctx)
        gnb_menu = await axios.get([data url something]);
        console.log(">>>gnb_menu",gnb_menu);  // <-- does this show anything?
    }
    return {
        pageProps,
        datas: gnb_menu.data.menu,
    }
}

在任何情况下，您都会遇到不安全的情况，因为您未定义 gnb_menu 并允许在尝试访问之前从未设置过的代码路径。如果 Component.getInitialProps 可能不存在，那么也许您想要 return 像这样的默认值：

return { 
  pageProps, 
  datas: gnb_menu && gnb_menu.data ? gnb_menu.data.menu : null
}