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
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 dependenciadatosPorCopiar
(sigue...)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