无法在 Next 中传递 props

我正在使用 Next Js (React SSR) 制作服务器端渲染应用程序。

Index.js（只需在index中调用另一个组件Layout即可）

import Layout from "./layout";
import React from "react";

class Home extends React.Component {
  render() {
    return (
      <div>
        <Layout />
      </div>
    );
  }
}

export default Home;

布局.js

import React from "react";
import Product from "./product";

class Layout extends React.Component {
  static async getInitialProps() {
    const res = await fetch("https://api.github.com/repos/developit/preact");
    console.log(res);
    const json = await res.json();
    return { stars: json.stargazers_count };
  }

  componentDidMount() {
    if (localStorage.getItem("userLoggedIn")) {
      //Get products details for logged in user api
      //For now let us consider the same api
      // const res = fetch("https://api.github.com/repos/developit/preact");
      // const json = res.json(); // better use it inside try .. catch
      // return { stars: json.stargazers_count };
    } else {
      // Get product details for guest user api
      //For now let us consider the same api
      // const res = fetch("https://api.github.com/repos/developit/preact");
      // const json = res.json(); 
      // return { stars: json.stargazers_count };
    }
  }

  render() {
    return (
      <div>
        This is layout page
        <Product stars={this.props.stars} />
      </div>
    );
  }
}

export default Layout;

完整的简单应用示例在这里: https://codesandbox.io/s/nextjs-getinitialprops-748d5 https://codesandbox.io/s/nextjs-getinitialprops-748d5

我的问题是，我试图将道具传递给product页面来自layout页面和道具来自getInitialProps（SSR）..但是您可以在提供的示例中看到，道具不起作用，但它仍然给出不明确的 for this.props.stars .

如果我将这段代码移入componentDidMount并使用setState并将状态作为 props 传递可以工作，但不会在视图页面源中显示从 api 获取的数据。

Note:请不要将此逻辑移动到它起作用的 index.js 文件中，但在我的实际应用程序中，它是动态路由页面，我将根据在该页面上获取的查询参数来获取 api。

如果您进入此链接https://748d5.sse.codesandbox.io/ https://748d5.sse.codesandbox.io/然后单击ctrl + u然后你会看到我还需要从 api 获取动态内容的源。

为了实现这个动态内容（在这个例子中星星计数）仅在视图源中显示，我正在做所有这些都是为了 SEO 目的。

简而言之，你不能打电话getInitialProps来自子组件：getInitialProps 注意事项 https://nextjs.org/docs/api-reference/data-fetching/getInitialProps#caveats.

获取初始道具不能在子组件中使用，仅在每个页面的默认导出中

Your Layout页面是一个子组件Home.

如果你想打电话getInitialProps，那么你需要定义getInitialProps从内部Home页面或创建一个调用自己的包装组件getInitialProps这将包裹页面的default export PageComponet使用这个包装组件：export default withStarsData(PageComponent);结果，这个包装器组件将通过PageComponent some props.

如果你想让这个函数灵活/动态，那么使用ctx https://nextjs.org/docs/api-reference/data-fetching/getInitialProps#context-object's query参数与一个动态路线 https://nextjs.org/docs/routing/dynamic-routes.

这是一个理解起来相当复杂的解决方案，但简而言之，它允许家庭（/）和布局（/layout）页面来获取相同的数据。如果您不想多次获取数据，而是获取一次然后在页面之间共享，那么您将需要使用高阶状态提供程序，例如redux https://github.com/zeit/next.js/tree/canary/examples/with-redux.

工作示例:

组件/withStars/index.js

import React from "react";
import fetch from "isomorphic-unfetch";

// 1.) this function accepts a page Component and...
const withStars = WrappedComponent => {

  // 7.) if stars data is present, returns <WrappedComponent {...props} /> with props
  // else if there's an error, returns the error
  // else returns a "Loading..." indicator
  const FetchStarsData = props =>
    props.stars ? (
      <WrappedComponent {...props} />
    ) : props.error ? (
      <div>Fetch error: {props.error} </div>
    ) : (
      <div>Loading...</div>
    );

  // 3.) this first calls the above function's getInitialProps
  FetchStarsData.getInitialProps = async ctx => {

    // 4.) here's where we fetch "stars" data
    let stars;
    let error;
    try {
      const res = await fetch("https://api.github.com/repos/developit/preact");
      const json = await res.json();
      stars = json.stargazers_count;
    } catch (e) {
      error = e.toString();
    }

    // 5.) optionally this will call the <WrappedComponent/> 
    // getInitialProps if it has been defined
    if (WrappedComponent.getInitialProps)
      await WrappedComponent.getInitialProps(ctx);

    // 6.) this returns stars/error data to the FetchStarsData function above
    return { stars, error };
  };

  // 2.) ...returns the result of the "FetchStarsData" function
  return FetchStarsData;
};

export default withStars;