Tengo un estado de reacción que contiene una serie de objetos que se ven así {ID: 7, LicenseNumber: 'Testing123', LicenseCreator: 7, added: true}
Para manipular los valores individuales de este objeto, he preparado una función que se ve así:
const updateLicenseInfo = (index, licenseInfoKey, licenseInfoVal) => { const foundLicenseInfo = { ...licenseInfo[index] }; const licenseInfoItems = [...licenseInfo]; foundLicenseInfo[licenseInfoKey] = licenseInfoVal; licenseInfoItems[index] = foundLicenseInfo; setLicenseInfo([...licenseInfoItems]); };Mi problema es que cuando ejecuto esta función dos veces seguidas, creo que la naturaleza asíncrona de los ganchos solo hace que se ejecute la última función.
Por ejemplo, cuando realizo una llamada a la API y luego trato de actualizar la ID, el campo agregado, la ID será nula pero la agregada habrá cambiado. Aquí está ese ejemplo:
postData('/api/licenseInfo/createLicenseInfoAndCreateRelationship', { LicenseNumber, RequestLineItemID: procurementLine.ID }) .then((res) => res.json()) .then((r) => { updateLicenseInfo(licenseIndex, 'ID', r.ID); updateLicenseInfo(licenseIndex, 'added', true); })¿Cómo puedo asegurarme de que esta función se ejecute y luego la siguiente función se ejecute sincrónicamente?
¿Qué tal refactorizar su función inicial para tomar una matriz de objetos como parámetros, algo con la estructura {key: "", val: ""} y luego iterar sobre esa matriz en su función, agregando todos los valores a las claves emparejadas y llamando setState solo una vez, con todos los cambios nuevos
const updateLicenseInfo = (index, pairs) => { const foundLicenseInfo = { ...licenseInfo[index] }; const licenseInfoItems = [...licenseInfo]; pairs.forEach((pair)=>{ foundLicenseInfo[pair.key] = pair.value; }); licenseInfoItems[index] = foundLicenseInfo; setLicenseInfo([...licenseInfoItems]); };y llamado así
updateLicenseInfo(licenseIndex, [{key:'ID', value:r.ID}, {key:'added', value:true}]);