0

Estoy utilizando react js y como base de datos utilizo firebase de google Este es mi componente Show (al cual le paso el parametro "name", dependiendo si name vale "products" o "rooms" debo pasarlo como parametro al componente Table, pero al hacerle un console.log (lineas 89 - 90) siempre me muestra el objeto products, a pesar de haber mandado a imprimir el objeto rooms en la consola, imprime el objeto products.

No encuentro el error, si alguien pudiera apoyarme por favor

import React, { useState, useEffect } from "react";
import Table from "./Table";
import { collection, getDocs, deleteDoc, doc } from "firebase/firestore";
import { db } from "../firebaseConfig/firebase";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";

const MySwal = withReactContent(Swal);

const Show = ({ name }) => {
  //1 - configuramos los hooks
  const [products, setProducts] = useState([]);
  const [rooms, setRooms] = useState([]);

  //2 - referenciamos a la DB firestore
  const Collection = collection(db, name);

  //3 - Funcion para mostrar TODOS los docs
  const getItemsProducts = async () => {
    const data = await getDocs(Collection);
    //console.log(data.docs)
    setProducts(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    console.log(products);
  };

  const getItemsRooms = async () => {
    const data = await getDocs(Collection);
    setRooms(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    console.log(rooms);
  };

  //4 - Funcion para eliminar un doc

  const deleteItemProducts = async (id) => {
    const itemDoc = doc(db, name, id);
    await deleteDoc(itemDoc);
    getItemsProducts();
  };

  const deleteItemRooms = async (id) => {
    const itemDoc = doc(db, name, id);
    await deleteDoc(itemDoc);
    getItemsRooms();
  };

 
  //6 - usamos useEffect
  useEffect(() => {
    getItemsProducts();

    // eslint-disable-next-line
  }, []);

  useEffect(() => {
    getItemsRooms();

    // eslint-disable-next-line
  }, []);

  //7 - devolvemos vista de nuestro componente
  return (
    <>
      <hr />
      <div>{name}</div>
      {console.log(products)}
      {console.log(rooms)}
      <Table
        confirmDelete={confirmDelete}
        name={name}
        data={name === "products" ? products : rooms}
      />
    </>
  );
};

export default Show;

introducir la descripción de la imagen aquí

1 respuesta 1

0

El problema se debe a que estás utilizando dos arreglos distintos para almacenar los productos y las habitaciones, y en tu componente Table siempre estás pasando el arreglo products, independientemente de si name es "products" o "rooms".

Una forma de solucionarlo sería utilizar un único arreglo y cambiar su contenido dependiendo del valor de name. Por ejemplo:

const Show = ({ name }) => {
  //1 - configuramos los hooks
  const [items, setItems] = useState([]);

  //2 - referenciamos a la DB firestore
  const Collection = collection(db, name);

  //3 - Funcion para mostrar TODOS los docs
  const getItems = async () => {
    const data = await getDocs(Collection);
    setItems(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
  };

  //4 - Funcion para eliminar un doc
  const deleteItem = async (id) => {
    const itemDoc = doc(db, name, id);
    await deleteDoc(itemDoc);
    getItems();
  };

  //6 - usamos useEffect
  useEffect(() => {
    getItems();
    // eslint-disable-next-line
  }, []);

  //7 - devolvemos vista de nuestro componente
  return (
    <>
      <hr />
      <div>{name}</div>
      <Table confirmDelete={confirmDelete} name={name} data={items} />
    </>
  );
};

Otra forma de hacerlo sería utilizar un único hook useEffect y, dentro de su función de efecto, realizar la carga de los items dependiendo del valor de name. Algo así:

const Show = ({ name }) => {
  //1 - configuramos los hooks
  const [items, setItems] = useState([]);

  //2 - referenciamos a la DB firestore
  const Collection = collection(db, name);

  //3 - Funcion para mostrar TODOS los docs
  const getItems = async () => {
    const data = await getDocs(Collection);
    setItems(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
  };

  //4 - Funcion para eliminar un doc
  const deleteItem = async (id) => {
    const itemDoc = doc(db, name, id);
    await deleteDoc(itemDoc);
    getItems();
  };

  //6 - usamos useEffect
  useEffect(() => {
    getItems();
    // eslint-disable-next-line
  }, [name]);

  //7 - devolvemos vista de nuestro componente
  return (
    <>
      <hr />
      <div>{name}</div>
      <Table confirmDelete={confirmDelete} name={name} data={items} />
    </>
  );
};

De esta forma, cada vez que cambie el valor de name, se llamará a la función getItems() para cargar los items correspondientes.

Espero te ayude de algo, o al menos te guie. Saludos!

1
  • Muchas gracias!, me sirvio la ultima forma!
    – Victor
    el 16 dic. 2022 a las 13:59

Tu Respuesta

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

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