Tengo un caso que: cuando el usuario cambia la entrada, con cada cambio, tengo que enviar una solicitud HTTP para obtener algunos datos del servidor. cuando obtengo los datos, actualizo mi estado con nuevos datos y eso, por supuesto, afecta la vista. entonces, el problema es que cuando el usuario cambia la entrada muy rápido, las solicitudes no se cumplen respectivamente y esto conduce a una vista incorrecta al final. entonces, no quiero enviar la solicitud hasta que se cumpla la anterior.
const parallel = (...Promises) => { return Promise.all(Promises); }; export function parentAccHandler(e, inputFiled) { const parentAccValue = e.target.value; const { fields } = this.state; parallel( getUsedRecord(fields), axios.get(`chartofaccounts/nextPK/${parentAccValue}`) ) .then(([usedRecord, nextPkRes]) => { this.setState((state, props) => { const { fields } = state; fields.acc_no.value = nextPkRes.data.next_PK ? nextPkRes.data.next_PK : ""; return { fields: updateOnParentAcc.call(this, fields, usedRecord, "PRESENT"), }; }); }) .catch((err) => { this.setState((state, props) => { let { fields } = state; fields.acc_no.value = ""; fields.parent_acc.prevReqStatus = "FULFILLED"; if (parseInt(parentAccValue) === 0) { fields = updateOnParentAcc.call(this, fields, null, "ZERO"); } else { fields = updateOnParentAcc.call(this, fields); } return { fields: fields, }; }); }); }Bueno, si envuelve los campos de entrada y otras cosas en un <fieldset> y le da el atributo disabled="disabled" , deshabilitará todos los campos.
Cuando realice una solicitud de Axios, agregue el atributo disabled="disabled" al conjunto de campos, y cuando la solicitud sea exitosa, elimine ese atributo.
Hágalo como state y luego simplemente establezca Estado en eso.
Otro método sería mostrar/ocultar superposición/carga para evitar hacer clic en otros campos.