Reactjs NextJS：将json加载到_app.js vs page中的getInitialProps中，避免双重调用

我使用getInitialProps将一个大json文件加载到一个单独的页面上。由于它是一个相当大的json，我想知道应该如何开始将它加载到索引页面上。只有当有人直接绕过索引进入子页面，并且子页面不在道具中时，子页面才应该加载它。与单个组件相比，这些文档在加载到_应用程序时有点混乱。此外，不清楚如何在getInitialProps中进行检查，如果已经获取了道具

import App from 'next/app'
import React from 'react'
import withReduxStore from '../store/with-redux-store'
import { Provider } from 'react-redux'
import "isomorphic-fetch"

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let res = await fetch('https://xxxx.json', { mode: 'no-cors' });
    let productParams = await res.text().then((data) => {
      return (data ? JSON.parse(data) : {})
    })
      .catch((error) => {
        console.error("Something bad happened", error);
      });
    console.log(`Show data fetched. Count: ${Object.keys(productParams).length}`);
    return { productParams, topState: "loaded" }
  }

  render() {
    return (
      <Provider store={reduxStore}>
        <Component {...this.props} />
      </Provider>
    )
  }
}

export default withReduxStore(MyApp)


________________________________________________


class SubPage extends React.Component {

  static async getInitialProps({ reduxStore, topState }) {
    reduxStore.dispatch(loadInitialState());

    if (topState != "loaded") {
      let res = await fetch('https://xxxxxx.json', { mode: 'no-cors' })
      let productParams = await res.json();
      return { productParams }
     } else {
    return {}
     }
  }
  state = { ...this.props, riskType: "xxx" }

  componentDidMount() {
    console.log(this.state);
  }

  render() {
    return (
      <Layout>
       <SubComponent />
      </Layout>

    )
  }
}


const mapStateToProps = (state) => {
  return state;
};

const mapDispatchToProps = (dispatch) => {
  return {
    loadInitialState: () => {
      dispatch({ type: "LOAD_INITIAL_STATE" });
    }
  };
};



export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SubPage)

从“下一个/应用程序”导入应用程序
从“React”导入React
从“../store/with redux store”导入with redux store
从“react redux”导入{Provider}
导入“同构提取”
类MyApp扩展了应用程序{
静态异步getInitialProps（{Component，ctx}）{
let res=等待取数（'https://xxxx.json“，{模式：'无cors'}）；
让productParams=wait res.text（）。然后（（数据）=>{
返回（数据？JSON.parse（数据）：{}）
})
.catch（（错误）=>{
错误（“发生了不好的事情”，错误）；
});
log（`showdatafetched.Count:${Object.keys（productParams.length}`）；
返回{productParams，topState:“已加载”}
}
render（）{
返回(
)
}
}
使用ReduxStore导出默认值（MyApp）
________________________________________________
类子页面扩展了React.Component{
静态异步getInitialProps（{reduxStore，topState}）{
dispatch（loadInitialState（））；
如果（顶部状态！=“已加载”）{
let res=等待取数（'https://xxxxxx.json“，{模式：'无cors'}）
让productParams=wait res.json（）；
返回{productParams}
}否则{
返回{}
}
}
state={…this.props，riskType:“xxx”}
componentDidMount（）{
console.log（this.state）；
}
render（）{
返回(
)
}
}
常量mapStateToProps=（状态）=>{
返回状态；
};
const mapDispatchToProps=（调度）=>{
返回{
loadInitialState:（）=>{
分派（{type:“加载初始状态”}）；
}
};
};
导出默认连接(
MapStateTops，
mapDispatchToProps
)（子页）

---

如果我转到主页，_应用程序加载json，然后如果我单击子页面链接，它将不再在道具中。只有当我重新加载子页面时，它才会再次出现在道具中。我做错了什么？

据我所知，你的例子似乎有几个问题。但要使您的场景正常工作，需要解决的主要问题有：

\u app.js

上的

Component

实际上是传递给

MyApp

组件的道具

由于您正在覆盖它，因此应该在静态

MyApp.getInitialProps

中调用

App.getInitialProps

。这实际上会触发对页面自己的

getInitialProps

的调用

从

\u app.js

中的

getInitialProps

返回的道具将作为

pageProps

发送到

MyApp

把所有这些放在一起会像这样：

从“下一个/应用程序”导入应用程序
函数MyApp（{Component，pageProps}）{
返回
}
MyApp.getInitialProps=async（appContext）=>{
//调用页面的'getInitialProps'并填充'appProps.pageProps'`
const-appProps=await-App.getInitialProps（appContext）；
//获取json文件
const res=等待取数（'https://xxxx.json“，{模式：'无cors'}）；
const productParams=await res.json（）；
返回{…appProps，productParams，topState:“loaded”}；
}
导出默认MyApp

---

请记住，在自定义

应用程序中设置
getInitialProps
，将强制应用程序上的每个页面在服务器端呈现，并完全取消静态优化。您可以在其上阅读更多有关自定义
应用程序的信息。
从我收集的信息来看，您的示例似乎有几个问题。但要使您的场景正常工作，需要解决的主要问题有：

\u app.js
上的
Component
实际上是传递给
MyApp
组件的道具
由于您正在覆盖它，因此应该在静态
MyApp.getInitialProps
中调用
App.getInitialProps
。这实际上会触发对页面自己的
getInitialProps
的调用
从
\u app.js
中的
getInitialProps
返回的道具将作为
pageProps
发送到
MyApp
把所有这些放在一起会像这样：

从“下一个/应用程序”导入应用程序
函数MyApp（{Component，pageProps}）{
返回
}
MyApp.getInitialProps=async（appContext）=>{
//调用页面的'getInitialProps'并填充'appProps.pageProps'`
const-appProps=await-App.getInitialProps（appContext）；
//获取json文件
const res=等待取数（'https://xxxx.json“，{模式：'无cors'}）；
const productParams=await res.json（）；
返回{…appProps，productParams，topState:“loaded”}；
}
导出默认MyApp

请记住，在自定义
应用程序中设置
getInitialProps
，将强制应用程序上的每个页面在服务器端呈现，并完全取消静态优化。您可以在其上阅读有关自定义
应用程序的更多信息