Error: se excedió la profundidad máxima de actualización. Esto puede suceder cuando un componente llama repetidamente a setState dentro de componentWillUpdate o componentDidUpdate.
al llamar la funcion para mapear informacion de firebase obtengo el error de se se excedió la profundidad máxima de actualización, esto sucede cuando en App.js en un condicional ternario utilizo useNavigate, para envolver el componente en Route, si lo dejo con sin Ruta si carga normal
const [proyectos, setProyectos]= React.useState([]);
async function actualizarEstadoProyectos(){
const p = await GetAllProyects();
setProyectos([...p])
}
actualizarEstadoProyectos();
aqui en la funcion anterior obtengo la informacion de la base de datos en firebase a traves del GetAllProyects para luego mapearla como se muestra a continuacion:
<>
<ul>
{proyectos ? proyectos.map((proyecto)=>
<li key={proyecto.id}>
{<ItemCardVisitantes proyecto={proyecto} />}
</li>
) : null}
</ul>
</>obtengo el error cuando en App ocupo un condicional ternario con useNavigate:
let navigate = useNavigate();
usuarioGlobal ?
usuarioGlobal.rol === "Funcionario" ? <Navbar /> : navigate("/lect")
: <Logueo />}como me muestra en el anterior codigo me genera el error.
let navigate = useNavigate();
usuarioGlobal ?
usuarioGlobal.rol === "Funcionario" ? <Navbar /> : <Visitantes />
: <Logueo />}asi no me genera ningún erro y se carga correctamente la pagina con los proyectos, a continuacion dejo el codigo de la funcion GetAllProyects
try {
const proyectos =[];
const collectionRef = collection(db, "proyectos");
const snaps = await getDocs(collectionRef);
// ciclo asíncrono para obtener los precios junto a la descripccion del proyecto
for await (const snap of snaps.docs){
const proyecto = snap.data();
proyecto.id = snap.id;
const benefiSnaps = await getDocs(collection(snap.ref, "beneficiarios"));
proyecto.beneficiario = benefiSnaps.docs[0].data();
proyectos.push(proyecto);
}
return proyectos;
} catch (error){
console.error(error);
}