0

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)

1 respuesta 1

1

Le estás pasando un array vacio al setter del estado.

introducir la descripción de la imagen aquí

y le estas haciendo push al estado directamente..

introducir la descripción de la imagen aquí

lo que pienso yo que deberias hacer es:

    const [prodArr, setProdArr] = useState([]);

    useEffect(()=>{
        // la coleccion es asincrona por eso debes meter la logica dentro del then:
        db.collection(producto).get().then(function(querySnapshot){
            let retrieveProds = [];
            retrieveProds.forEach(function(doc){
                // añades a retrieveProds en lugar de prodArr
                retrieveProds.push({id: doc.id, data: doc.data()});     
            });
            setProdArr(retrieveProds); // redefines el estado   
        })
        .catch(function(error){
                console.log('Error getting cached document: ', error);
            });
        
        console.log('Datos almacenados en el hook: ', prodArr);

    }, []);
1
  • Muchas gracias!! me funciono, no me di cuenta que cambie el nombre del array!
    – Martin
    Commented el 3 feb. 2021 a las 21:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.