老莫的笔记本  
  
请选择 进入手机版 | 继续访问电脑版
查看: 844|回复: 0

React+umi 的 link 带参数跳转的坑

[复制链接]

662

主题

878

帖子

5115

积分

超级版主

Rank: 8Rank: 8

积分
5115
发表于 2020-11-26 15:30:09 | 显示全部楼层 |阅读模式
本帖最后由 周大胖子 于 2020-11-27 10:09 编辑

    UMI link 带参 不跳转问题 -。-

问题表述:
      React Router为何在url相同参数不同的情况下跳转但是并不刷新页面?     我有个商品详情页面,url/detail:235,这个页面中有个“猜你喜欢”模块,:后面跟的是每个商品的skuId号码,点击其中某个商品图标后仍然要跳转到/detail下,只是后面跟的skuId变了。现在的问题是,点击后只是看到地址栏后面跟的skuId确实变了,但是页面并没有刷新或者跳转,仍然处于之前的商品页面,请教大家如何解决?



这个问题的解决方式,其实就是网上那种:
              使用 componentWillReceiveProps(nextProps) {   let classid = nextProps.match.params.classid;  },然后对之后的代码进行操作。
第二个坑:   

            开始会有警告:componentWillReceiveProps has been renamed, and is not recommended for use.  【componentWillReceiveProps已重命名,不建议使用。】
                                    将数据获取代码或副作用移动到componentDidUpdate ;

           按理说,他既然给推荐,那么componentDidUpdate  与  componentWillReceiveProps  应该一样喽?
             实际的差别其实很大,  componentWillReceiveProps  ,点击则内部参数发生变化。 componentDidUpdate  点第二次 才TM的 发生变化!
            所以我 决定,既然警告,我不理他,不升级 react 到17 不就行了?[ -.- 嗯  这就是我 目前的解决方式]


  1. componentWillReceiveProps(nextProps) {
  2.         // 这个挂载的操作 得到的结果是正常的,但是下面componentDidUpdate 是不正常的,慢了一步
  3.         // console.log( '6666' +nextProps.match.params.classid)
  4.         if(nextProps.match.params.classid){
  5.             
  6.             let classid = nextProps.match.params.classid;

  7.             if( this.state.classid ){

  8.                 console.log( this.state.classid +'----'+  classid)
  9.                
  10.                 if( this.state.classid == classid){
  11.                
  12.                     // console.log('分类没换,只是换了页码')

  13.                 }else{
  14.                     // console.log('换分类了')
  15.                     this.setState({
  16.                         classid:classid
  17.                     })
  18.                     // 派发action 的一套
  19.                     this.getNewTypeList( classid );

  20.                 }


  21.             }

  22.         }
  23.     }
复制代码
再贴个componentDidUpadte
  1. // 监听变化,由于部分带参函数
  2.     componentDidUpdate(nextProps) {

  3.         // 这里还有个问题,我得点两次 这里面的  nextProps.match.params.classid 才会换掉
  4.         // console.log(nextProps.match.params.classid)
  5.         
  6.         // 判断有没有分类
  7.         // if(nextProps.match.params.classid){
  8.             
  9.         //     let classid = nextProps.match.params.classid;

  10.         //     if( this.state.classid ){

  11.         //         console.log( this.state.classid +'----'+  classid)
  12.                
  13.         //         if( this.state.classid == classid){
  14.                
  15.         //             console.log('分类没换,只是换了页码')

  16.         //         }else{
  17.         //             console.log('换分类了')
  18.         //         }


  19.         //     }

  20.         // }
  21.         // console.log(nextProps.match.params.classid)
  22.       
  23.     }
复制代码




回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表