Question

This page 是我能找到的最相关的信息，但还不够。

我有一个通用组件，可以为我的网站显示一个应用栏。此应用栏显示来自我存储在用户会话中的单独 API 的用户头像。我的问题是，每当我通过 next/link 更改页面时，头像都会消失，除非我在应用程序的每个页面上都实现 getServerSideProps 以访问似乎很浪费的会话。

我发现我可以像这样在 getInitialProps 中实现 _app.js 来收集信息

MyApp.getInitialProps = async ({ Component, ctx }) => {
    await applySession(ctx.req, ctx.res);
    if(!ctx.req.session.hasOwnProperty('user')) {
        return {
            user: {
                avatar: null,
                username: null
            }
        }
    }

    let pageProps = {}
    if (Component.getInitialProps) {
        pageProps = await Component.getInitialProps(ctx);
    }
    return {
        user: {
            avatar: `https://cdn.discordapp.com/avatars/${ctx.req.session.user.id}/${ctx.req.session.user.avatar}`,
            username: ctx.req.session.user.username
        },
        pageProps
    }
}

我认为正在发生的事情是在页面更改时被称为客户端，其中会话当然不存在，这导致没有任何内容被发送到道具并且没有显示头像。我想也许我可以用本地存储解决这个问题，如果我可以区分是在服务器端还是客户端调用它，但我想知道是否有更优雅的解决方案。

Answer 1

我设法通过在 _app.js 中创建一个状态，然后像这样在 useEffect 中设置状态来解决这个问题

function MyApp({ Component, pageProps, user }) {
    const [userInfo, setUserInfo] = React.useState({});
    React.useEffect(() => {
        if(user.avatar) {
            setUserInfo(user);
        }
    });
    return (
        <ThemeProvider theme={theme}>
            <CssBaseline />
            <NavDrawer user={userInfo} />
            <Component {...pageProps} />
        </ThemeProvider>
    );
}

现在用户变量只设置一次，它也会在页面更改时发送到我的 NavDrawer 栏。

Next JS 取一次数据显示在所有页面上

1 个答案: