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

Question

您好：)关于下一个/链接的_app.js和<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 { 
  pageProps, 
  datas: gnb_menu && gnb_menu.data ? gnb_menu.data.menu : null
}