estoy teniendo un inconveniente con los Hooks de react y he buscado pero no se como solucionarlo.
El programa me lee bien los datos de Firestore, me los almacena en el SetState correctamente, pero desde el proximo componente (ProductsList
) al cual le paso como Props el State prodArr
, primero lo lee bien pero luego se vacia el array, no se si es por el ciclo de vida o que pero no me deja mapear para imprimir en pantalla. Dejo los console.log abajo.
BuildProduct
import {db} from '../../firebase';
import {useEffect, useState} from 'react';
import ProductList from './ProductList';
export default function BuildProduct( {producto} ){
const [prodArr, setProdArr] = useState([]);
useEffect(()=>{
let retrieveProds = [];
db.collection(producto).get().then(function(querySnapshot){
querySnapshot.forEach(function(doc){
prodArr.push({id: doc.id, data: doc.data()});
});
})
.catch(function(error){
console.log('Error getting cached document: ', error);
});
setProdArr(retrieveProds);
console.log('Datos almacenados en el hook: ', prodArr);
}, []);
return <ProductList data={prodArr} />
};
ProductList
import 'bulma/css/bulma.css';
export default function ProductList({data}){
console.log('recibido: ', data);
let productData = data;
return(
<div> {productData} </div>
);
}
(en ProductList borre todo el map y eso xq no me funcionaba, quise probar almacenando el state en una variable local pero tampoco)
recibido: []0: {id: "iMkOvnbQT0APIHnnSzTs", data: {…}}length: 1__proto__: Array(0)
BuildProduct.jsx:23
Datos almacenados en el hook: []0: {id: "iMkOvnbQT0APIHnnSzTs", data: {…}}length: 1__proto__: Array(0)
ProductList.jsx:4
recibido: []length: 0__proto__: Array(0)