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
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
Test
, ¿Te aparece alguno de los mensajes que tienes dentro deuseEffect
en la consola?