Actualmente tengo el siguiente estado de uso y función:
const [displayTraits, setDisplayTraits] = useState(false); const feelingsFilled = () => { const keysToCheck = ["anxiety", "mood", "cognition"]; function validate(obj) { try { if ( Object.keys(obj) .filter((key) => keysToCheck.includes(key)) .every((key) => obj[key].counter > 0) ) { setDisplayTraits(true); } else { setDisplayTraits(false); } } catch (err) { console.log("error"); } } validate(daily); }; feelingsFilled(); que luego trato de conectar con un modal para que cuando mi función llene los feelingsFilled() devuelva verdadero y cambie los displayTraits de visualización a verdadero, entonces se abrirá.
<Modal isVisible={displayTraits} />Estoy tratando de ejecutar esto pero obtengo el siguiente error
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.Tendría que hacer algunas suposiciones sobre el origen de los datos diarios. Si se trata de un accesorio cambiante o algún otro estado, puede calcular cosas en función de eso.
Usando algún estado:
useEffect(() => { //computeYourStuffAndSetState const result = validate(daily); setDisplayTraits(result); }, [daily]); // The array param is a change-listenerLuego, puede vincular su <Modal visible directamente a la variable de estado, en lugar de una función.
Otro ejemplo es no usar el estado en absoluto y calcularlo cada vez que cambia diariamente.
const showModal = useMemo(() => { return validate(daily); }, [daily]);useMemo y useEffect son parte de los ganchos de reacción incorporados.
O simplemente puedes hacer algo como:
const showModal = validate(daily);Esto también funcionará, pero tendrá menos rendimiento ya que volverá a calcular en cada renderizado.