Javascript 为什么服务器端呈现的样式化组件与Nextjs破坏了我的应用程序？
我有一个错误需要帮助。每当我想要访问主页时，我的Next.js应用程序就会不断崩溃。我不断得到一个无法读取未定义的数据映射的错误。浏览器一直指向我的_document.js文件，我似乎在这里找不到错误，因为这个应用程序到目前为止一直运行得很好。我将在下面粘贴一些代码Javascript 为什么服务器端呈现的样式化组件与Nextjs破坏了我的应用程序？,javascript,reactjs,next.js,styled-components,Javascript,Reactjs,Next.js,Styled Components,我有一个错误需要帮助。每当我想要访问主页时，我的Next.js应用程序就会不断崩溃。我不断得到一个无法读取未定义的数据映射的错误。浏览器一直指向我的_document.js文件，我似乎在这里找不到错误，因为这个应用程序到目前为止一直运行得很好。我将在下面粘贴一些代码 import Document, { Head, Main, NextScript } from 'next/document'; import { ServerStyleSheet } from 'styled-component
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static getInitialProps({ renderPage }) {
const sheet = new ServerStyleSheet();
const page = renderPage(App => props => sheet.collectStyles(<App {...props} />));
const styleTags = sheet.getStyleElement();
return { ...page, styleTags };
}
render() {
return (
<html>
<Head>{this.props.styleTags}</Head>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}
从'next/Document'导入文档，{Head，Main，NextScript}；
从“样式化组件”导入{ServerStyleSheet}；
导出默认类MyDocument扩展文档{
静态getInitialProps（{renderPage}）{
const sheet=new ServerStyleSheet（）；
const page=renderPage（App=>props=>sheet.collectStyles（））；
const styleTags=sheet.getStyleElement（）；
返回{…页面，样式标签}；
}
render（）{
返回(
{this.props.styleTags}
);
}
}
我的浏览器一直指向const page变量您是否尝试过使用next.js repo中的
样式化组件import Document, { Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet()
const originalRenderPage = ctx.renderPage
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
})
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
}
} finally {
sheet.seal()
}
}
render() {
return (
<html>
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}
从“next/Document”导入文档，{Main，NextScript}；
从“样式化组件”导入{ServerStyleSheet}；
导出默认类MyDocument扩展文档{
静态异步getInitialProps（ctx）{
const sheet=new ServerStyleSheet（）
const originalRenderPage=ctx.renderPage
试一试{
ctx.renderPage=（）=>
原始渲染图({
增强应用程序：（应用程序）=>（道具）=>
图纸样式(