Estoy escribiendo un script de reacción en el que cada vez que provienen nuevos datos de transporte del backend, debe rastrearlos y mostrarlos en el frontend, pero el problema es que cada vez que llegan nuevos valores del backend, se agregan con el estado anterior. Estoy confundido de cómo resolverlo.

 const transportData = [ [ { type: "metro", icon: MetroIcon, sessionCount: 0, totalGreenhouseGazes: 0, }, { type: "bus", icon: AutoBusIcon, sessionCount: 0, totalGreenhouseGazes: 0, }, ], [ { type: "run", icon: RunIcon, sessionCount: 0, totalGreenhouseGazes: 0, }, { type: "carpool", icon: CarpoolIcon, sessionCount: 0, totalGreenhouseGazes: 0, }, ], ]; const [allTransport, setAllTransport] = React.useState([]); <-- this is coming from backend //in the format {bike: {sessionCount: 1, totalGreenhouseGazes: 10} bus: {sessionCount: 0, totalGreenhouseGazes: 12}}

Quiero estos datos de allTransprt para actualizar los datos de transporte anteriores

 const [transport, setTransport] = React.useState(transportData); React.useEffect(() => { // find the mode of transport of populate its data correctly const keys = Object.keys(allTransport || {}); transport.map((groupOfMode) => { groupOfMode.map((mode) => { keys.forEach((key) => { if (key === mode.type) { mode.sessionCount = allTransport[key]?.sessionCount || 0; mode.totalGreenhouseGazes = allTransport[key]?.totalGreenhouseGazes || 0; mode.totalDistance = allTransport[key]?.totalDistance || 0; } }); }); }); }, [allTransport]);

De mi código, vienen los datos de allTransport, se actualizan en transportData y se ve así en la interfaz cuando allTransport tiene los cuatro valores seleccionados.

En la segunda iteración, cuando llegan los datos de allTransport, muestra los valores anteriores de transportData y actualiza el seleccionado. Como esto:

Esto sucedió cuando solo se seleccionaron los tres datos. Aunque el círculo rojo no fue el que se recuperó del backend, puso el valor anterior. Entonces, quiero algo que si el valor no se recupera del backend, solo debería tener el valor original de transportData.

Cualquier ayuda es apreciada. ¡¡Gracias!!