|
本帖最后由 周大胖子 于 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 不就行了?[ -.- 嗯 这就是我 目前的解决方式]
- componentWillReceiveProps(nextProps) {
- // 这个挂载的操作 得到的结果是正常的,但是下面componentDidUpdate 是不正常的,慢了一步
- // console.log( '6666' +nextProps.match.params.classid)
- if(nextProps.match.params.classid){
-
- let classid = nextProps.match.params.classid;
- if( this.state.classid ){
- console.log( this.state.classid +'----'+ classid)
-
- if( this.state.classid == classid){
-
- // console.log('分类没换,只是换了页码')
- }else{
- // console.log('换分类了')
- this.setState({
- classid:classid
- })
- // 派发action 的一套
- this.getNewTypeList( classid );
- }
- }
- }
- }
复制代码 再贴个componentDidUpadte- // 监听变化,由于部分带参函数
- componentDidUpdate(nextProps) {
- // 这里还有个问题,我得点两次 这里面的 nextProps.match.params.classid 才会换掉
- // console.log(nextProps.match.params.classid)
-
- // 判断有没有分类
- // if(nextProps.match.params.classid){
-
- // let classid = nextProps.match.params.classid;
- // if( this.state.classid ){
- // console.log( this.state.classid +'----'+ classid)
-
- // if( this.state.classid == classid){
-
- // console.log('分类没换,只是换了页码')
- // }else{
- // console.log('换分类了')
- // }
- // }
- // }
- // console.log(nextProps.match.params.classid)
-
- }
复制代码
|
|