0

Tengo un componente "TableConsolidado" en el cual tengo un boton llamado Test que al hacer click llama a la funcion "copiarDatos", en esta funcion hago un setDatosPorCopiar para actualizar el dicho estado "DatosPorCopiar", a su vez manejo un useEffect que cuando cambia el estado de este "DatosPorCopiar" va a realizar una accion que es "mapDatosPorCopiar" en el cual guardo datos en firestore, el problema es que cuando hago click en el boton "Test" no me actualiza el componente introducir la descripción de la imagen aquí

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

  const copiarDatos = () => {

    const meses = [
      "diciembre",
      "enero",
      "febrero",
    ];
    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,
            dni: da.dni,
            id: da.id,
            lastName: da.lastName,
            mes: da.mes,
            montoPagado: da.montoPagado,
            name: da.name,
            notas: da.notas,
            phone: da.phone,
            price: da.price,
            roomName: da.roomName,
          },
        ])
      );
    console.log("se ejecuto copiar datos (pasar datos al state)");
  
       
  
  };

  const mapDatosPorCopiar = async () => {
    datosPorCopiar.map(async (datos) => {
      await addDoc(consolidadosCollection, {
        dni: datos.dni,
        anio: datos.anio,
        mes: mes,
        lastName: datos.lastName,
        name: datos.name,
        phone: datos.phone,
        price: datos.price,
        roomName: datos.roomName,
      });
      console.log("se guardaron los datos en la bd");
    });
  };

  useEffect(() => {
    if (datosPorCopiar.length > 0) {
      console.log("ingreso al use effect y ejecuto");
      mapDatosPorCopiar();
    } else {
      console.log("ingreso pero no ejecuto");
    }
  }, [datosPorCopiar]);

  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={copiarDatos} value={mes}>
              Test
            </button>
          </div>
        </div>
      </div>
    </>
  );
};

export default TableConsolidado;

En caso se necesite mayor información, por favor me dejan un comentario para poder actualizar el post

1
  • Tengo curiosidad, despues de dar click a Test, ¿Te aparece alguno de los mensajes que tienes dentro de useEffect en la consola?
    – g.4
    el 19 ene. a las 18:21

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.