如何开始使用 nextjs 获取每个应用程序的数据

Posted 2023-04-14

【中文标题】如何开始使用 nextjs 获取每个应用程序的数据

【英文标题】：How can I fetch data on every app start using nextjs

【发布时间】：2021-10-02 04:42:01

【问题描述】：

我在 nextjs 中创建了一个博客应用程序。我想从 api 获取菜单（导航）并加载到导航组件。但是如何在每次刷新时获取菜单并将其保存以响应上下文 api？我尝试从主页获取菜单并将其保存以响应上下文 api，但在其他页面上菜单不可用。

const MyApp = ( Component, pageProps ) => 
  const [queryClient] = React.useState(() => new QueryClient());

  return (
    <AppProvider>
      <QueryClientProvider client=queryClient>
        <Hydrate state=pageProps.dehydratedState>
          <Component ...pageProps />
          <ReactQueryDevtools />
        </Hydrate>
      </QueryClientProvider>
    </AppProvider>
  );
;

MyApp.getInitialProps = async (appContext) => 
  const appProps = await App.getInitialProps(appContext);

  const response= await apiClient().get('/api/index');

  const  setMenus  = useAppContext(); // This line not working
  setMenus(response.data);

  return  ...appProps ;
;

【问题讨论】：

在您的示例中，您不需要上下文，因为您将道具钻到每个Component 到pageProps，您的响应已经在每个条目页面道具上。使用响应传递除了...appProps, menus: response.data

@DennisVash 那么，如何从其他组件访问菜单？

【参考方案1】：

不确定您在这里的策略是什么，但您可以选择任何一种方式，将菜单传递给您的提供商或使用钻孔道具：

const MyApp = ( Component, pageProps ) => 
  // OR pass those menus to the provider
  const menus = pageProps;


  // OR the response already passed to every page entry point at pageProps
  return (
    <AppProvider value=menus>
      <Component ...pageProps />
    </AppProvider>
  );
;

MyApp.getInitialProps = async (appContext) => 
  const appProps = await App.getInitialProps(appContext);

  const response= await apiClient().get('/api/index');
  return  ...appProps, menus: response.data ;
;

// Now from every entry page like MenuPage, the menu should be available OR use it as context consumer
const MenuPage = (menu) => ...

【讨论】：

那么，如何从其他组件访问菜单？

你指的是哪种方法？我也在答案中提到了它

谢谢。最后一个问题，这是将菜单加载到动态导航的最佳方式吗？

听起来很合理的解决方案，“最好的方法”是自以为是的。

我试图从组件中获取菜单但它未定义？