Hago clic en un botón y en eso, para cada elemento de una lista, va y elimina algunas cosas. Mi objetivo es deshabilitar el botón mientras se realiza la eliminación, por lo que tengo un estado de isDeleting que maneja la habilitación/deshabilitación del botón.
Así es como configuré el cambio de este estado isDeleting . Pero aún así, el botón se habilita aunque todavía se está procesando algo de eliminación (porque puedo ver que la API de eliminación todavía se está ejecutando en la pestaña Red de Chrome Dev Tools).
¿Cómo debo cambiar mi código para esperar completamente hasta que todo esté listo antes de cambiar el estado de mi estado isDeleting ?
// Button Click handleDeleteAllItems = async () => { await this.gridApiforEachNodeAfterFilter((node) => { this.setState({ isDeleting: true }); node.setSelected(false); }); }; // This code runs for each item in the button click loop { this.setRowSelectable(event.node, false); let Id = this.brokerFundsDict[event.data.id].id; fetchDeleteFund(someOtherThing.id, id).then(() => { fetchGetFunds(selectedBroker.id).then(() => { this.setRowSelectable(event.node, true); }); }); this.setState({ isDeleting: false }); }Puedes usar Promise.all así:
function deleter(someOtherThing) { //original: This code runs for each item in the button click loop return fetchDeleteFund(someOtherThing.id, id).then(() => { fetchGetFunds(selectedBroker.id).then(() => { this.setRowSelectable(event.node, true); }); }); } function triggerDelete() { this.setRowSelectable(event.node, false); let allDeletePromises = []; toBeDeletedNodes.forEach(node => { allDeletePromises.push(deleter(node)); }); Promise.all(allDeletePromises) .then(arrOfMessages => { this.setState({ isDeleting: false }); }) }