为了账号安全,请及时绑定邮箱和手机立即绑定

next第一次初始化页面请求的数据为空解决办法

2020.01.10 14:18 6138浏览

开发next的过程中又遇到这样的一个问题:浏览器头一次打开next项目的某一个页面,该页面需要请求后端的数据,然而在请求到接口数据之前getInitialProps方法已经return出结果导致页面没有接口数据。当多次打开页面后就不会有这种情况。
分析可能的原因:
1.浏览器存在缓存,直接使用缓存的页面数据。
2.项目的数据接口太深,需要在每个循环中请求数据
3.重新刷新浏览器页面就正常
代码问题分析: 
1.在getInitialProps逻辑中我是有使用async和await因此可以保证接口是有请求的
2.每个循环的请求结果我会加到相应的这个对象的新建字段中

test.getInitialProps = async (res) => {
  const { fnavlist, options, links } = await init()
  const id = res.req ? hrefObj(res.req.url).id : res.query.id
  const navBar = await fnavlist.filter(item => item.name.includes('支持'))[0].children.filter(item => item.name.includes('下载'))[0]
  await navBar.children.map(async items => {
    await items.children.map(async item => {
      let { data } = await getPageContent(item.id, 1, 20)
      item.con = await data.ArticlePage.Articles
      return item
    })
    return items
  })

  return {
    fnavlist,
    options,
    links, navBar,
    current: navBar.children.filter(item => item.id == id)[0],
    list: navBar.children.filter(item => item.id == id)[0].children
  }
};

解决:
当页面中没有关键的数据的时候刷新页面。(个人感觉这不是最优解决办法后续会继续深入研究)

useEffect(() => {
    if (!props.list[0].con) {//切换tab没有数据bug重新刷新页面
      window.location.href = window.location.href
    }
  })


点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消