在 NextJs 中的组件之间共享 props

Posted 2023-02-22

【中文标题】在 NextJs 中的组件之间共享 props

【英文标题】：Share props between components in NextJs

【发布时间】：2021-09-26 15:44:10

【问题描述】：

项目文件结构如下：

components
├─homepage
│ ├─index.jsx
├─location
│ ├─index.jsx
pages
│ ├─location
│ │ ├─[id].jsx
│ ├─presentation
│ │ ├─[id].jsx
│ ├─_app.jsx
│ ├─index.jsx
functions
├─dataFetch.js

pages/index.jsx 具有getInitialProps() 内部具有数据获取功能。我需要将 api 获取结果数据分享给 pages/location/[id].jsx 和 pages/presentation/[id].jsx。

我对这个问题的解决方案是开始使用 redux（我不仅在这种情况下需要它）。 但是，它会在网站首次加载时页面呈现道具出现问题。

例如，如果我转到http://localhost:3000 - 它会正常工作，因为数据是在pages/index.jsx 中获取的。 但是如果我转到http://localhost:3000/location/12345 - 将不会获取任何数据，因为我没有在该页面上调用getInitialProps()。

我使用 redux 解决此问题的方法是否正确？如果是这样，我应该从哪里获取数据？

【参考方案1】：

我会说添加一个 AppWrapper，它在上下文提供程序 https://reactjs.org/docs/context.html#reactcreatecontext 内呈现子项。并将其放入 _app.jsx

_app.jsx 也可以是 Redux 获取数据的地方。