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

Question

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

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

我的 slug 从服务器端发送，我只需要在 header 中动态获取它们一次。

在页眉里面是这样的:

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

但是因为它是一个可重用的组件，所以我不知道如何以及在何处调用 getServerSideProps 或 getStaticProps。

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

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

Answer 1

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

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

此代码将呈现您的数据一次。 ChangeData 是反冲或 react 上下文的 stateChanger。