为什么数据未显示在nextjs中?

为什么从index.js作为子代调用时不能在layout.js中获取数据?还为我提供了正确的更新解决方案来实现这一目标..我确实搜索了很多问题，但没有一个解决了我的问题，并且我无法清楚地理解这些解决方案，因此请帮我解决上面给出的示例.解决方案由于getInitialProps只能添加到页面导出的默认组件中，因此将其添加到任何其他组件中将不起作用.您应该改用componentDidMount()或useEffect，或在索引中移动getInitialProps，然后将结果传递给组件.类似于(未经测试): index.js :import Layout from "./layout";import React from "react";class Home extends React.Component { render() { return ( <div> <Layout /> <h4> Main content will be displayed here !! </h4> </div> ); }}export default Home; layout.js import React from "react";import fetch from "isomorphic-unfetch";class Layout extends React.Component { constructor(props) { super(props); this.state = { stars: false }; } async componentDidMount() { console.log("comes into layout getinitial props"); const res = await fetch("https://api.github.com/repos/developit/preact"); const json = await res.json(); // better use it inside try .. catch this.setState({ stars: json.stargazers_count }); } render() { const { stars } = this.state; return ( <div> <p>Preact has {stars} ⭐</p> <p> Why I couldn't get the above "props.star" ? </p> </div> ); }}export default Layout;示例，带有类组件奖金:如果您想为应用程序的所有页面添加布局，这不是最好的方法，而是应该查看自定义_app.js ，示例 I am making a very very simple nextjs application where I am trying to fetch the data from api.My requirement is I should display the data in layout.js file and this layout.js file is a children in index.js file.index.js:import Layout from "./layout";import React from "react";class Home extends React.Component { render() { return ( <div> <Layout /> <h4> Main content will be displayed here !! </h4> </div> ); }}export default Home;layout.js:import React from "react";import fetch from "isomorphic-unfetch";function Layout(props) { return ( <div> <p>Preact has {props.stars} ⭐</p> <p> Why I couldn't get the above "props.star" ? </p> </div> );}Layout.getInitialProps = async () => { console.log("comes into layout getinitial props"); const res = await fetch("https://api.github.com/repos/developit/preact"); const json = await res.json(); // better use it inside try .. catch return { stars: json.stargazers_count };};export default Layout;So as per the above given code, I have called the layout page inside index.js page (in my real application I need to call like this only so no changes in calling layout inside index)..But when I made a console.log() in the function Layout.getInitialProps in layout, it doesn't print anything and hence the api data not fetched..Complete working demo here with codeWhy can't I fetch the data inside the layout.js while calling as a children from index.js?Also provide me the right updated solution to achieve this.. I really searched for many questions but none solved my issue and I couldn't understand those solutions clearly so please help me with the above given example. 解决方案 That because getInitialProps can only be added to the default component exported by a page, adding it to any other component won't work.You should use componentDidMount() or useEffect instead, or move getInitialProps in the index and then pass the result to the component. something like (not tested) :index.js :import Layout from "./layout";import React from "react";class Home extends React.Component { render() { return ( <div> <Layout /> <h4> Main content will be displayed here !! </h4> </div> ); }}export default Home;layout.js import React from "react";import fetch from "isomorphic-unfetch";class Layout extends React.Component { constructor(props) { super(props); this.state = { stars: false }; } async componentDidMount() { console.log("comes into layout getinitial props"); const res = await fetch("https://api.github.com/repos/developit/preact"); const json = await res.json(); // better use it inside try .. catch this.setState({ stars: json.stargazers_count }); } render() { const { stars } = this.state; return ( <div> <p>Preact has {stars} ⭐</p> <p> Why I couldn't get the above "props.star" ? </p> </div> ); }}export default Layout;Edit:Example with class componentBonus: If you want to add the layout for all the pages of your app this isn't the best approach, instead you should take a look to custom _app.js, example 这篇关于为什么数据未显示在nextjs中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！