getInitialProps 返回未定义

Question

我在 _app 上使用 getInitialProps 获取 cookie 并将值向下传递给组件以设置元素的宽度，但它始终发送未定义。

这是我将在其中获取 cookie 的 _app 页面

// _app.tsx -> page 

function MyApp({ Component, pageProps }: AppProps) {
    return ( 
        <Layout {...pageProps}> 
            <Component {...pageProps} /> 
        </Layout>   
    ); 
}

MyApp.getInitialProps = async (appContext) => { 
    const pageProps = App.getInitialProps(appContext); 
    const { req } = appContext.ctx; 
    const cookies = parseCookies(req); 

    return { 
        ...pageProps, 
        initialAsideLeftHandler: cookies.asideLeftHandler   
    }; 
}
export default MyApp;

传递给layout组件进一步在asideLeft组件中使用

// Layout.tsx -> component 

interface Props {
  initialAsideLeftHandler: {
    x: number, 
    y: number, 
    width:number, 
    height:number
  }, 
  children: JSX.Element[] | JSX.Element
}

const Layout = (props: Props) => {
  const { children } = props;
  const [isAsideRightOpen, setIsAsideRightOpen] = useState(true);

  return (
    <>
          <AsideLeft initialAsideLeftHandler={props.initialAsideLeftHandler}>
</AsideLeft>
    /* everything else */
    <>
    )
}

我将在其中使用从服务器获取的 cookie 的组件，但不幸的是，当我解析它时，它 returns 出现错误：位置 0JSON 中的意外标记 u

// asideLeftHandler.tsx -> component 

function AsideLeft({initialAsideLeftHandler}) {
  const router = useRouter();
  const state = JSON.parse(initialAsideLeftHandler)
  const [asideLeftHandler, setAsideLeftHandler] = useState(JSON.parse(initialAsideLeftHandler)); // ---> line of error: Unexpected token u in JSON at position 0

  useEffect(() => {
    Cookie.set("asideLeftHandler", JSON.stringify(asideLeftHandler), { expires: 7});
  }, [asideLeftHandler]);

    return (
        <Resizeable
            width={asideLeftHandler.width}
        >
        /* everything else */
    )
}

Answer 1

你的_app应该是这样的

function MyApp({ Component, pageProps, initialAsideLeftHandler }: AppProps) {
    return ( 
        <Layout initialAsideLeftHandler={initialAsideLeftHandler}> 
            <Component {...pageProps} /> 
        </Layout>   
    ); 
}

MyApp.getInitialProps = async (appContext) => { 
    const pageProps = App.getInitialProps(appContext); 
    const { req } = appContext.ctx; 
    const cookies = parseCookies(req); 

    return { 
        ...pageProps, 
        initialAsideLeftHandler: cookies.asideLeftHandler  
    }; 
}

getInitialProps 返回未定义

getInitialProps returning undefined

next.js