场景:数据新增成功之后,需要返回原来的查询表,这时候的查询,需要使用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}); } /** * 如果有删除 或 修改 依次把判断方法写在下面 */}
如果有更好的方法,欢迎交流!