Next.js使当前页面保持活动状态并重新呈现,而下一页的getInitialProps完成加载

Gil · 03月24日

场景是这样的:

  1. 在一页(AssessmentListPage)中,我显示了现有评估的列表;在第二页(AssessmentDetailPage)中,我将显示所选评估的详细信息;
  2. 我正在使用redux,并且两个页面都使用相同的slice操作系统状态(assessments
  3. 当我从AssessmentListPage转到时AssessmentDetailPage,一切正常。当我按下后退按钮时,它崩溃了。
  4. 崩溃的原因:Next.js使AssessmentDetailPage页面保持活动状态,直到static getInitialProps方法完成。被调用的操作会更改状态,并导致当前页面在没有预期数据的情况下重新呈现。然后它会AssessmentListPage正确呈现

解决这个问题的最优雅的方法是什么?我应该分离减速器吗?

目前,我只是更具防御性,并添加了通常不需要避免此特定崩溃的检查。

我还考虑过不要在中加载数据getInitialProps并这样做,componentDidMount()但是我不喜欢复制代码来处理服务器端和客户端渲染的想法。

任何建议深表感谢。谢谢!

class AssessmentListPage extends React.Component {
  static async getInitialProps({ store, req }) {
    await store.dispatch(loadProfile(api)(req))
    await store.dispatch(loadAssessments(api)(req))
  }
}

class AssessmentDetailPage extends React.Component {
  static async getInitialProps({ store, req }) {
    await store.dispatch(loadProfile(api)(req))
    await store.dispatch(loadAssessment(api)(req, query.id))
  }
}
回答
时间
想发表一点想法咩~

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序