Tengo un arreglo de objetos el cual quiero trabajar con la información de cada objeto, el problema es que cuando utilizo distintas formas de recorrer dicho arreglo no hace nada.
Lo que hago es obtener datos de un servidor en firebase y guardar esos datos en una variable para poder trabajar con el en otro método. Los datos del servidor llegan bien y se guardan en el arreglo, pero al intentar recorrer dicho arreglo no pasa nada, no entra al ciclo o cualquier forma que intente para acceder a cada posición.
En la siguiente imagen muestro el arreglo con el que quiero trabajar.
Este es el código en el que estoy teniendo problemas.
async getData(coleccion) {
let datos = [];
db.collection(coleccion)
.onSnapshot((querrySnapshot) => {
querrySnapshot.forEach((doc) => {
datos.push({ ...doc.data(), id: doc.id });
})
})
console.log("getData");
console.log(datos);
this.setState({ datos: datos });
}
componentDidMount() {
this.getData("Medidas");
}
maximo() {
console.log(typeof this.state.datos);
Object.entries(this.state.datos).map(a => {
console.log(a);
console.log("...");
});
}
Esto es lo que obtengo en la consola, notece que después de imprimir el pido de la variable this.state.datos ya no entra al .map. PD. Ignoren los warnigns, estoy consiente de ellos y se como arreglarlos, lo haré después
Este es el código completo del componente.
import React, { useState } from 'react';
import "../../css/Sensores.css";
import { DatosSensoresService } from '../../services/DatosSensoresService';
import { db } from "../../firebase-config";
import { Sensor } from './Seccion/Sensor/Sensor';
class Sensores extends React.Component {
constructor(props) {
super(props);
this.state = { datos: [] };
this.getData = this.getData.bind(this);
this.maximo = this.maximo.bind(this);
}
async getData(coleccion) {
let datos = [];
db.collection(coleccion)
.onSnapshot((querrySnapshot) => {
querrySnapshot.forEach((doc) => {
datos.push({ ...doc.data(), id: doc.id });
})
})
console.log("getData");
console.log(datos);
this.setState({ datos: datos });
}
componentDidMount() {
this.getData("Medidas");
}
maximo() {
console.log(typeof this.state.datos);
Object.entries(this.state.datos).map(a => {
console.log(a);
console.log("...");
});
}
render() {
console.log("state");
console.log(this.state.datos);
this.maximo();
return (
<div className="Sensores">
<h3>Cliente 1</h3>
<div className="Secciones">
{
DatosSensoresService.map((sens) => {
return <Sensor Key={sens.id} nombre={sens.nombre} ultimos30={sens.ultimos10s} max={sens.max} min={sens.min} ubicacion={sens.ubicacion} />
})
}
</div>
</div>
)
}
}
export default Sensores;
He intentado usar foreach, .map directamente y usando Object.entries y Object.keys, pero no se si lo estoy implementando mal o cual sea el problema. Mis intenciones finales son poder obtener cada dato del los sensores y mandarlo a su respestivo componente, mi problema es que no consigo acceder a los datos del arreglo de objetos fuera de getData().