Reactjs 下一个JS-getStaticProps不返回任何内容

我将next.js与上下文API和样式化组件一起使用，但我似乎无法让getStaticProps正常工作。 我读过其他帖子，他们经常谈论我的定制应用程序，但在使用上下文API之前我从未遇到过这个问题，我也尝试过getInitialProps函数，但没有用。 我还应该注意到，即使在没有包含上下文包装器之后，我也没有从函数中得到响应，所以我根本不确定应该在哪里查找

这是我的密码，你能看到发生了什么吗

import React from 'react';
import fetch from 'node-fetch';

export default function Header(props) {
  console.log(props.hi);
  return <div>Hey dis header</div>;
}

export async function getStaticProps(context) {
  return {
    props: {
      hi: 'hello',
    },
  };
}

从“React”导入React；
从“节点获取”导入获取；
导出默认函数标题（道具）{
console.log（props.hi）；
返回Hey dis头；
}
导出异步函数getStaticProps（上下文）{
返回{
道具：{
嗨，‘你好’，
},
};
}

我曾尝试从函数中进行日志记录，但没有任何内容是日志记录的，因此我认为问题在于函数由于任何原因都没有运行

这是我的自定义应用程序文件

import { GlobalContextWrapper } from 'context';
import Header from 'components/header/Header';
import App from 'next/app';

function MyApp({ Component, pageProps }) {
  return (
    <GlobalContextWrapper>
      <Header />
      <Component {...pageProps} />
      <p>footer</p>
    </GlobalContextWrapper>
  );
}
MyApp.getInitialProps = async (appContext) => {
  // calls page's `getInitialProps` and fills `appProps.pageProps`
  const appProps = await App.getInitialProps(appContext);

  return { ...appProps };
};

export default MyApp;

从“上下文”导入{GlobalContextWrapper}；
从“组件/标题/标题”导入标题；
从“下一个/应用程序”导入应用程序；
函数MyApp（{Component，pageProps}）{
返回(
页脚

);
}
MyApp.getInitialProps=async（appContext）=>{
//调用页面的'getInitialProps'并填充'appProps.pageProps'`
const-appProps=await-App.getInitialProps（appContext）；
返回{…appProps}；
};
导出默认MyApp；

这是我的上下文文件

import { useReducer } from 'react';
import initialState from './intialState';
import reducer from './reducer';
import GlobalStyle from '../GlobalStyle';
import theme from '../theme';
import { ThemeProvider } from 'styled-components';

export const GlobalContext = React.createContext();

export function GlobalContextWrapper({ children }) {
  const [globalState, dispatch] = useReducer(reducer, initialState);
  return (
    <GlobalContext.Provider value={{ globalState, dispatch }}>
      <GlobalStyle />
      <ThemeProvider theme={theme}>{children}</ThemeProvider>
    </GlobalContext.Provider>
  );
}

从'react'导入{useReducer}；
从“/intialState”导入初始状态；
从“./reducer”导入减速机；
从“../GlobalStyle”导入GlobalStyle；
从“../theme”导入主题；
从“样式化组件”导入{ThemeProvider}；
export const GlobalContext=React.createContext（）；
导出函数GlobalContextWrapper（{children}）{
const[globalState，dispatch]=useReducer（reducer，initialState）；
返回(
{儿童}
);
}

问题在于我不是从页面导出此函数，而是从组件和自定义应用程序文件导出

---

有没有人知道我该怎么做？问题是，我有一个从响应中获取数据的标题，我希望该标题显示在每个页面上，而无需手动将其添加到每个页面，同时重复getStaticProps函数

基于代码的解决方案只是在

\u app.js-getInitialProps

中获取数据并传递到

标题

function MyApp({ Component, pageProps }) {
  return (
    <GlobalContextWrapper>
      <Header data={pageProps.header}/>
      <Component {...pageProps} />
      <p>footer</p>
    </GlobalContextWrapper>
  );
}
MyApp.getInitialProps = async (appContext) => {
  // calls page's `getInitialProps` and fills `appProps.pageProps`
  const appProps = await App.getInitialProps(appContext);


  const headerData = ....

  return { ...appProps, header: headerData };
};

函数MyApp（{Component，pageProps}）{
返回(
页脚

);
}
MyApp.getInitialProps=async（appContext）=>{
//调用页面的'getInitialProps'并填充'appProps.pageProps'`
const-appProps=await-App.getInitialProps（appContext）；
常数头数据=。。。。
返回{…appProps，头：headerData}；
};

是的，您只能使用

getInitialProps、getServerSideProps、getStaticProps…

在Next.js页面搜索Next.js持久布局时，应该有一篇详细的文章，上面有tailwind.css作者编写的codesandbox示例。事实上，您正在寻找类似全局导航栏的东西，然后，您应该在组件中调用api fetch，并通过

useffect

对其进行更新，然后将其放入应用程序中。在这种情况下，您不应该依赖getInitialProps等。请使用传统的Api请求并相应地更新它。这很有效，谢谢-我实际上使用的是上下文Api。您认为这比使用上下文api添加数据，然后从上下文api中提取数据要好吗？我认为您应该使用上下文或类似的（redux…）来实现灵活性。但重要的是，如果您希望从服务器端为所有页面初始化数据（共享布局目的），则必须将数据放入app.js，获取数据并设置为上下文提供程序的值。否则，如果从客户端获取数据，你可以直接在你的头中进行客户端抓取并设置上下文值是的，我想这样做，但有一点问题-我将对上下文api的调用设置为使用效果，以便它只运行，但是这会导致在第一次渲染后加载数据，这会导致问题我想我可能只是硬编码头哈哈，没想到这么简单的事情会变成这么困难我想我找到了解决办法！我会把它写在密码笔上寄给你