Digamos que tengo una serie de objetos cuyo estado me interesa.
Por ejemplo, algunos datos de la forma:
const data = [{ A: a, B: b, C: c, D: d },...]Supongamos que C y D son elementos de consulta de alto costo, por lo que, para aumentar la velocidad, cargo la página con A y B. Luego, una vez que tengo A y BI, voy a buscar los elementos C y D.
Obtengo todos los datos nuevamente cada ... segundos, para tener los valores más actualizados.
fetchAB(); // Called every x seconds fetchCD(); // Called every y secondsNecesito asignar estos valores a un componente, que debería actualizarse y mostrar los valores más actualizados:
const SomeComponent = () => { const [data, setData] = useState([]); // Some fetch logic return( { data.map((d, idx) => { return ( <key={idx}> <td>{dA}</td> <td>{dB}</td> <td>{dC}</td> <td>{dD}</td> </> )} )} ) }¿Cómo hago para actualizar el estado de una matriz de objetos mapeados que se actualiza desde dos (o más) fuentes?
Encontré que la mejor manera de lograr esto era convertir mi conjunto de objetos en un objeto de objetos.
De esta manera puedo usar el mapeo directo para estados anteriores.
P.ej
// Displaying the data structure, not actually a const. Data is returned from an API fetch. const data = { 1 : { A: a, B: b, C: c, D: d }, 2: { A: a, B: b, C: c, D: d },... }Entonces puedo actualizar el estado así:
var dataCD = fetchCD(); // Returns an object with id as the key, with "C, D" values. var keys = Object.keys(dataCD); for (var key in keys){ data[key] = { ...data[key], // Include all previous data values in the object C: dataCD[key]["C"], D: dataCD[key]["D"] } }Se debe implementar la misma lógica para todos los demás métodos que actualizan el estado del objeto.