如何在 Next.js 中获取可重用布局组件的数据

Question

我需要将 slugs 放入 Header 组件中，该组件可在布局内的所有网站中重复使用：

const Layout = ({ children }) => {
  return (
    <>
      <Header />//////////this one.
      {children}
      <Footer />
     </>
  );
};

我的 slugs 来自服务器端，我只需要在标头中动态获取它们一次。

标题内部类似：

categoriesLinks.map(category=> {
  return <div>{category.SLUG}</div>
})

但因为它是一个可重用的组件，我不知道如何以及在哪里调用getServerSidePropsor getStaticProps。

• 例如，如果我使用索引组件，我需要在每个组件中获取数据
• getInitialProps如果我尝试在 中获取它_app，它不会获取它（获取undefined）

处理这个问题的正确方法是什么？这似乎是一个非常大的问题，我找不到合适的解决方案。

Answer 1

您不能在组件中调用 getServerSideProps 或 getStaticProps。您必须在页面内编写 getServersideprops 或 getStaticProps，然后将获取的数据传递到布局。您还可以使用状态管理系统，如反应上下文或反冲（推荐）来保存数据，这样您就不必每次都重新获取，然后在布局中执行以下操作

useEffect(() => ChangeData(data), [])

此代码将渲染您的数据一次。ChangeData 是反冲或反应上下文的 stateChanger。