博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react.js 生命周期componentDidUpdate的另类用法:防止页面过渡刷新
阅读量:5844 次
发布时间:2019-06-18

本文共 1407 字,大约阅读时间需要 4 分钟。

场景:数据新增成功之后,需要返回原来的查询表,这时候的查询,需要使用react的生命周期:componentDidUpdate

componentDidUpdate() 这个生命周期的作用是当props或state更新之后,使用它更新DOM节点。如果使用不当,则查询页面会不停的调用查询的方法,不停的执行刷新操作。因此,需要给新增的方法增加一个标志,通过这个标志,判断,如果新增成功,则调用一次查询方法,否则,则不调用。

这个标志,通常在 2 个位置使用:

1. action的 新增 方法中;

2. 查询组件的 this.state 与 componentDidUpdate() 中;

这两个标志,分别是:

addGroupResponseFlag                  //新增成功的标志
addResponseFlagHas:false           //新增成功后是否更新标志,默认为false

 

下面代码展示:

//action 方法,在return前使用 let addGroupResponseFlag = httpUtils.httpResponseFlag(params);  return{      type: ADD_VERSION_GROUP,         data: {             params,             //新增成功标志             addGroupResponseFlag         }    }
//查询组件constructor(props){    super(props);    this.state = {  //新增完成之后是否更新标志,默认false    addResponseFlagHas:false    }//页面更新数据之后需要调用这个生命周期componentDidUpdatecomponentDidUpdate(){  /**  * 给获取数据的方法传参数,分页  */  let pageSize = this.state.pageSize;  let pageNum = this.state.pageNum;  /**  * 这里使用的是ES6的对象解构赋值,api接收参数只有一个变量,这里的赋值,只是值{pageNum , pageSize},传的对象的值  */  let addGroupResponseFlag = this.props.versionGroupState.addGroupResponseFlag;  let addResponseFlagHas = this.state.addResponseFlagHas;  if(addGroupResponseFlag && !addResponseFlagHas){      this.setState({         addResponseFlagHas: true  });  /**  * addGroupResponseFlag && !addResponseFlagHas 为 true 时,执行重新查询方法  */  this.props.searchAppVersionGroup({pageNum , pageSize});  }  /**  * 如果有删除 或 修改 依次把判断方法写在下面  */}

 

如果有更好的方法,欢迎交流!

 

转载地址:http://pzqcx.baihongyu.com/

你可能感兴趣的文章
(转)直接拿来用!最火的iOS开源项目(一)
查看>>
java8新特性stream深入解析
查看>>
Linux manjaro系统安装后无法连接wifi,解决方案
查看>>
关于我的知识星球服务
查看>>
前端每隔几秒发送一个请求
查看>>
div+css+js 树形菜单
查看>>
javax.jdo.option.ConnectionURL配置的问题
查看>>
ubuntu 开启 apache mod_rewrite
查看>>
android EventBus 3.0 混淆配置
查看>>
数据库备份需要注意的
查看>>
判断点在多边形内
查看>>
程序报错与提示
查看>>
EXT.NET 更改lable和Text的颜色
查看>>
我的友情链接
查看>>
把文件放在SD卡
查看>>
postfix搭建及配置
查看>>
DNS区域委派与转发
查看>>
[deviceone开发]-一个很炫的手势动画示例
查看>>
Windows Server 2008 RemoteApp---发布应用程序
查看>>
IPC-----消息队列
查看>>