0

tengo un componente TableConsolidado en el cual al hacer click por primera vez en mi button "Test" ejecuto la funcion storeCopiarDatos, pero al hacerle click no llega a realizar el "datosPorCopiar.map", pero al darle por segunda vez recien llega a ejecutar el "datosPorCopiar.map", que puede estar pasando?, aca dejo el codigo:

import React, { useState } from "react";
import { Link } from "react-router-dom";

import { collection, getDocs, addDoc } from "firebase/firestore";
import { db } from "../firebaseConfig/firebase";

const consolidadosCollection = collection(db, "consolidados");

const TableConsolidado = ({ confirmDelete, data, names, anio, mes }) => {
  const [datosPorCopiar, setDatosPorCopiar] = useState([]);

  const copiarDatos = () => {
    const meses = [
      "diciembre",
      "septiembre",
      "octubre",
      "noviembre",
    ];
    let mesAnterior;
    let anioNuevo = anio;

    if (mes === "diciembre") {
      // si el caso es diciembre, entonces el anterior es noviembre.
      mesAnterior = "noviembre";
    } else {
      // en cualquier otro caso, el mes anterior es el que se encuentra una posición antes en el arreglo de meses.
      const indiceMesActual = meses.indexOf(mes);
      mesAnterior = meses[indiceMesActual - 1];
    }

    if (mesAnterior === "diciembre") {
      anioNuevo = anio - 1;
    }

    data
      .filter((dat) => dat.mes === mesAnterior && dat.anio === anioNuevo)
      .map((da) =>
        setDatosPorCopiar((prevState) => [
          ...prevState,
          {
            anio: da.anio,
            roomName: da.roomName,
          },
        ])
      );
    console.log("se ejecuto copiarDatos");
  };

  const storeCopiarDatos = async (e) => {
    setDatosPorCopiar([]);
    copiarDatos();
    e.preventDefault();

    datosPorCopiar.map(
      async (datos) => {
        console.log("se guardaron los datos en la bd");
        await addDoc(consolidadosCollection, {
          dni: datos.dni,
          anio: datos.anio,             
          montoPagado: datos.montoPagado,
          notas: datos.montoPagado,
        });
      }
    );

    console.log("termino el store y empieza copiar Datos");
  };

  return (
    <>
      <hr />
      <div className="container">
        <div className="row">
          <div className="col">
            <div className="d-grid gap-2">
              <Link
                to="/createconsolidado"
                state={{ names: names, anio: anio, mes: mes }}
                className="btn btn-secondary mt-2 mb-2"
              >
                CREATE
              </Link>
            </div>

            <table className="table table-dark table-hover">
              <thead>
                <tr>
                  <th>CUARTO</th>
                  <th>DNI</th>
                  <th>NOMBRES</th>
                  <th>APELLIDOS</th>
                  <th>TELEFONO</th>
                  <th>PRECIO</th>
                  <th>MONTO PAGADO</th>
                  <th>NOTAS</th>
                  <th>ACCION</th>
                </tr>
              </thead>
              <tbody>
                {data
                  .filter((dat) => dat.mes === mes && dat.anio === anio)
                  .map((dat) => (
                    <tr key={dat.id}>
                      <td>{dat.roomName}</td>
                      <td>{dat.dni}</td>
                      <td>{dat.name}</td>
                      <td>{dat.lastName}</td>
                      <td>{dat.phone}</td>
                      <td>{dat.price}</td>
                      <td>{dat.montoPagado}</td>
                      <td>{dat.notas}</td>
                      <td>
                        <Link
                          to={`/edit/${dat.id}`}
                          state={{ names: names }}
                          className="btn btn-light"
                        >
                          <i className="fa-solid fa-pencil"></i>
                        </Link>
                        <button
                          onClick={() => {
                            confirmDelete(dat.id);
                          }}
                          className="btn btn-danger"
                        >
                          <i className="fa-solid fa-trash"></i>
                        </button>
                      </td>
                    </tr>
                  ))}
              </tbody>
            </table>

            <button onClick={storeCopiarDatos} value={mes}>
              Test
            </button>
          </div>
        </div>
      </div>
    </>
  );
};

export default TableConsolidado;

En caso se necesite alguna información, por favor no duden en dejar algun mensaje para poder actualizar el post con la información que se necesite, si necesitan alguna foto tambien por favor me comentan para subir lo requerido

3
  • Esta bien lo que te pasa, vos en la misma funcion storeCopiarDatos estas intentando editar un estado (ademas lo editas dos veces, primero le mandas un array vacio e inmediatamente llamas a copiar datos, mejor hacer todo eso de una)e inmediatamente despues intentas leerlo. React no te deja leerlo asi, la segunda parte yo (que tengo menos de un año de experiencia con React) la haria con un useEffect, no se que diria un SSR o SR al respecto. Podrias hacer que StoreCopiarDatos corte en el e.preventDefault, y abajo agregar un useEffect que tenga como dependencia datosPorCopiar (sigue...)
    – Agustin G.
    el 15 ene. a las 11:34
  • dentro del useEffect, SI datosPorCopiar.length > 0, quiere decir que se copiaron datos, entonces ahora si podrias llamar a datosPorCopiar.map(. Un consejo, como veo que este map es asincrono, te creas una funcion asincrona que se encargue de hacer el map, y en el useEffect luego de comprobar que hay datos, llamas esta funcion asincrona encargada de mapear. Saludos
    – Agustin G.
    el 15 ene. a las 11:36
  • me quedo muy claro, gracias por tu ayuda!
    – Victor
    el 17 ene. a las 1:23

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

Examina otras preguntas con la etiqueta o formula tu propia pregunta.