nextjs 组件获取数据

Posted 2023-03-30

【中文标题】nextjs 组件获取数据

【英文标题】：nextjs components fetching data

【发布时间】：2020-06-18 13:36:36

【问题描述】：

本教程允许我从页面获取数据。组件如何获取数据？

我有想要从中获取数据的组件。我怎样才能做到这一点？

https://nextjs.org/docs/basic-features/data-fetching#server-side-rendering

【参考方案1】：

您可以使用 useEffect 来获取数据。另一方面，您可以从父组件中获取数据并将数据传递给子组件。

const Component = props => 
   // You can get data from parent component.
   const parentData = props.parentData

   useEffect(() => 
     // Fetch Data here when component first mounted
   , [])

【讨论】：

这是否意味着在 nextjs 中将徽标放入布局的正确方法是每次使用布局时都传递它？像这样： export default function PageName( logo ) return ( // content );必须在每一页上传递那个道具感觉有点奇怪。

如果您的徽标在每个页面上都不同，我认为您应该在每个页面中通过props 传递它。另一方面，如果您的徽标在所有页面上都相同，您可以只在 SiteLayout 组件中定义徽标。

问题在于在 SiteLayout 中定义它不是静态生成的。如果硬编码，它会在页面生成后加载。如果每次我得到静态生成时作为道具传递，但不是很好的代码。

【参考方案2】：

例如。首先在 pages 文件夹中创建 login.js 页面并调用 api 和 login.js ，然后将数据传递给组件文件夹中的 logincomponent.js 文件。这是在 Next.js 的组件中加载数据的正确方法。 其他方式是在组件中使用 UNSAFE_componentWillMount 调用 api。