如何在 next.js 中重新获取客户端的 api 数据？

【问题标题】：How to refetch api data on client side in next.js?如何在 next.js 中重新获取客户端的 api 数据？
【发布时间】：2018-02-07 16:05:10
【问题描述】：

一旦状态改变，我需要从 api 重新加载数据。是否可以在客户端使用 getInitialProps 再次获取数据？

【问题讨论】：

您的问题显示no attempt 解决了问题。如果您已经尝试过，您应该编辑我们的问题以准确详细说明您做了什么、研究了什么，并指向任何有用但没有回答您的问题的链接。如果您尝试编写解决方案，则应在编辑中添加该解决方案。您的尝试应该变成MCVE，以便阅读和理解。另请阅读Stack Overflow question checklist
在状态更新时尝试使用componentDidMount react 生命周期获取数据

【解决方案1】：

为什么不获取componentDidMount上的数据？

componentDidMount() {
  yourAPI.fetch().then((pFetchData) => {
    this.setState({data: pFetchData});
  });
}

实际上，componentDidMount 是调用获取数据的最佳位置，原因有两个：

使用 DidMount 可以清楚地表明，直到之后才会加载数据初始渲染。这会提醒您设置初始状态正确地，所以你不会最终导致未定义的状态错误。
如果您需要在服务器上呈现您的应用程序（SSR/同构/其他流行语），componentWillMount实际上将是调用了两次“一次在服务器上，一次在客户端”，即可能不是你想要的。将数据加载代码放入 componentDidMount 将确保仅从客户。

希望对你有帮助:)

【讨论】：