文章/答案/技术大牛

发布

社区首页 >问答首页 >在Nextjs中，getStaticProps不能与getInitialProps一起使用

问在Nextjs中，getStaticProps不能与getInitialProps一起使用
EN

Stack Overflow用户

提问于 2021-03-26 20:18:33

回答 2查看 991关注 0票数 0

在我的_document.js中，我配置了一些样式。这是我的_document.js

import React from "react";
import Document, {Html ,Head, Main, NextScript } from "next/document";
import { ServerStyleSheets } from "@material-ui/styles";

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <meta charSet="utf-8" />
          <meta name="theme-color" content="#000000" />
          <link rel="shortcut icon" href={require("assets/img/favicon.png")} />
          <link
            rel="apple-touch-icon"
            sizes="76x76"
            href={require("assets/img/apple-icon.png")}
          />
          {/* Fonts and icons */}
          <link
            rel="stylesheet"
            type="text/css"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"
          />
          <link
            href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"
            rel="stylesheet"
          />
        </Head>
        <body>
          <div id="page-transition"></div>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
  
MyDocument.getInitialProps = async ctx => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: App => props => sheets.collect(<App {...props} />)
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [
      <React.Fragment key="styles">
        {initialProps.styles}
        {sheets.getStyleElement()}
      </React.Fragment>
    ]
  };
};

export default MyDocument;

现在，当我尝试使用getStaticProps从API获取数据时，它会给我一个服务器错误，

TypeError: 'Cannot read property of 'data' undefined'

我在index.js中的代码

export const getStaticProps = async () => {
  const res = await fetch("http://localhost:8055/items/gallery2");
  const dataa = await res.json();
  return {
    props: { gallery: dataa },
  };
};

当我试着做的时候，

{gallery.data.map(image_url => (
<div>
</div>
))

它给出了下面提到的typeError。我应该怎么做才能让它开始工作？PS:我正在使用index.js中的getStaticProps。我不知道为什么会发生这个错误，请帮我解决这个问题。

谢谢!编辑1:我的控制台错误：

Uncaught     at Cardd (file://D:\projects\nextjs-material-kit-master\.next\server\pages\components.js:15365:14)
    at processChild (file://D:\projects\nextjs-material-kit-master\node_modules\react-dom\cjs\react-dom-server.node.development.js:3043:14)
    at resolve (file://D:\projects\nextjs-material-kit-master\node_modules\react-dom\cjs\react-dom-server.node.development.js:2960:5)
    at ReactDOMServerRenderer.render (file://D:\projects\nextjs-material-kit-master\node_modules\react-dom\cjs\react-dom-server.node.development.js:3435:22)
    at ReactDOMServerRenderer.read (file://D:\projects\nextjs-material-kit-master\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)
    at renderToString (file://D:\projects\nextjs-material-kit-master\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27)
    at renderPage (file://D:\projects\nextjs-material-kit-master\node_modules\next\dist\next-server\server\render.js:54:851)
    at Object.ctx.renderPage (file://D:\projects\nextjs-material-kit-master\.next\server\pages\_document.js:1629:26)
    at Function.getInitialProps (file://D:\projects\nextjs-material-kit-master\.next\server\pages\_document.js:699:19)
    at Function.module.exports../pages/_document.js.MyDocument.getInitialProps (file://D:\projects\nextjs-material-kit-master\.next\server\pages\_document.js:1640:83)
    at loadGetInitialProps (file://D:\projects\nextjs-material-kit-master\node_modules\next\dist\next-server\lib\utils.js:5:101)
    at renderToHTML (file://D:\projects\nextjs-material-kit-master\node_modules\next\dist\next-server\server\render.js:54:1142)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async (file://D:\projects\nextjs-material-kit-master\node_modules\next\dist\next-server\server\next-server.js:109:97)
    at async __wrapper (file://D:\projects\nextjs-material-kit-master\node_modules\next\dist\lib\coalesced-function.js:1:330)

javascript

html

css

reactjs

next.js

回答 2

Stack Overflow用户

发布于 2021-03-26 20:31:51

添加try/catch块并检查接口请求是否失败：

export const getStaticProps = async () => {
  let dataa = {data: []};
  try {
    const res = await fetch("http://localhost:8055/items/gallery2");
    dataa = await res.json();
  } catch(err) {
    console.log("request failed: ", err);
  }

  return {
    props: { gallery: dataa },
  };
};

票数 0

Stack Overflow用户

发布于 2021-03-31 18:34:58

加上“道具”或者“this.props”在画廊前，再次测试

{
    props.gallery.data.map(image_url) => {return (
        <div></div>  
    )}
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66816821

复制

相似问题

问在Nextjs中，getStaticProps不能与getInitialProps一起使用
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Nextjs中，getStaticProps不能与getInitialProps一起使用EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Nextjs中，getStaticProps不能与getInitialProps一起使用
EN