const [obj, setObj] = useState{ id1: false, id2: false, ... }) const someFunc = async(id)=> { setObj({...obj, [id]: true}) await longApiCall() setObj({...obj, [id]: false}) }Esta función se llama un par de veces (o más), y esto debería establecer ambos en verdadero y luego en falso, pero se completan casi al mismo tiempo. Debido a que el estado de configuración es asíncrono, cada estado de configuración solo cambia uno a falso porque el segundo lo sobrescribe de nuevo a verdadero.
¿Cuál es la mejor manera de garantizar que el objeto de estado siempre obtenga las actualizaciones correctas? Sé que puedo usar una referencia o establecer directamente la propiedad en el obj sin usar el definidor de estado, pero quiero mantener el comportamiento de que este cambio de estado provoca una nueva representación.
// after calls are finished obj = { id1: true, id2: false } //desired outcome obj = { id1: false, id2: false }Utilice la versión de función de establecer estado en su lugar. React lo pasará en el último valor del estado, y puede calcular el nuevo estado a partir de eso:
const someFunc = async(id)=> { setObj(prev => { return {...prev, [id]: true}; }); await longApiCall(); setObj(prev => { return {...prev, [id]: false}; }); }Esta es la solución más limpia que se me ocurrió.
const objMimic = useRef({}) const someFunc = async(id)=> { objMimic.current[id] = true setObj({...obj, [id]: true}) await longApiCall() objMimic.current[id] = false setObj({...objMimic.current}) }