React.js life cycle componentdidupdate Alternative usage: Prevent page transitions from refreshing

Scenario: After the data has been added successfully, it needs to return the original query table, when the query needs to use the React life cycle: componentdidupdate

The Componentdidupdate () function of this life cycle is to update the DOM node with the props or state after it has been updated. If used improperly, the query page will continue to call the method of the query, do not stop the refresh operation. Therefore, it is necessary to add a flag to the new method, judging by this flag, if the new success, then call the Query method, otherwise, it is not called.

This flag, usually used in 2 locations:

1. New method of action;
2. Query the this.state of the component and componentdidupdate ();

These two flags are:
Addgroupresponseflag //New sign of Success
Addresponseflaghas:false //If the flag is updated after the new success, the default is False

The following code shows:

Action method, which is used before return
Let Addgroupresponseflag = httputils.httpresponseflag (params);   return {      type:add_version_group,         data: {             params,             // New Success Flag               addgroupresponseflag         }    }

//Query ComponentConstructor (props) {super (props);  This. State = {  //whether to update flag after new completion, default false   　　 Addresponseflaghas:false    }//This life cycle needs to be called after the page updates the data componentdidupdatecomponentdidupdate () {/** * To get the data of the method to pass parameters, paging*/Let pageSize= This. state.pagesize; Let Pagenum= This. State.pagenum; /** * This is using ES6 object deconstruction assignment, API receive parameter only one variable, here assignment, just value {pagenum, pageSize}, the value of the passed object*/let addgroupresponseflag = This. Props.versionGroupState.addGroupResponseFlag; Let addresponseflaghas = This. State.addresponseflaghas; if(Addgroupresponseflag &&!)Addresponseflaghas) {       This. SetState ({ Addresponseflaghas:true  }); /** * Addgroupresponseflag &&!addresponseflaghas True, re-query method is executed*/   This. Props.searchappversiongroup ({pagenum, pageSize}); }  /** * If there is a deletion or modification, then write the judgment method below*/}

If there is a better way, welcome to communicate!

React.js life cycle componentdidupdate Alternative usage: Prevent page transitions from refreshing