1

我正在尝试在 getServerSideProps 中获取一些数据，但是我无法在前面阅读，我已经按照 Vercel 的所有教程进行操作，并且仍然从来自 getServerSideProps 的道具（我在前面得到的道具）中获得未定义

GetServerSideProps 函数：

export const getServerSideProps: GetServerSideProps = async (
  context: GetServerSidePropsContext,
) => {
  const session = await getSession(context);
  const relatorioId = context.query.id as string;

  if (relatorioId) {
    const token = context.req.cookies['next-auth.csrf-token'];
    const client = await NewApolloClient(token);
    const data = await client.query<IRelatorioVisita>({
      query: gql`
        query getRelatorioById($id: String!) {
          getRelatorioById(id: $id) {
            id
            officerId
            
            ...

          }
        }
      `,
      variables: { id: relatorioId },
    });

    const relatorio: IRelatorioVisita = data?.data;
    return {
      props: relatorio,
    };
  }

  const relatorio: IRelatorioVisita = {
    officerId: session.user.email as string,
    empresaCnpj: '',

    ...

  };

  return {
    props: relatorio,
  };
};

反应页面（初始化）：

export default function RelatorioVisitaComponent(
  props: InferGetServerSidePropsType<typeof getServerSideProps>,
): JSX.Element {
  console.log({ props });

...

}

那个 console.log 总是返回 undefined

这是_app.tsx：

import { useEffect } from 'react';
import { ThemeProvider } from 'styled-components';
import { AppProps } from 'next/app';
import Head from 'next/head';
import { Provider as AuthProvider } from 'next-auth/client';
import { theme } from '../styles/theme';
import { GlobalStyles } from '../styles/global-styles';
import 'devextreme/dist/css/dx.light.css';
import 'bootstrap/dist/css/bootstrap.min.css';

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  const { authSession } = pageProps;

  useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement?.removeChild(jssStyles);
    }
  }, []);

  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <AuthProvider session={authSession}>
        <ThemeProvider theme={theme}>
          <Component {...pageProps} />
          <GlobalStyles />
        </ThemeProvider>
      </AuthProvider>
    </>
  );
}

export default MyApp;
4

0 回答 0