En useEffect en mi componente de reacción, obtengo datos y actualizo un estado, pero no sé por qué useEffect siempre se ejecuta:
const Comp1 = () => { const [studies, setStudies]= useState([]); React.useEffect( async()=>{ await axios.get('/api/expert/', ) .then((response) => { setStudies(response.data.studies); }, (error) => { console.log(error ); }) console.log("called+ "+ studies); },[studies]); return( <Comp2 studies={studies}/> ) }Aquí está mi segundo componente utilizado en el primer componente...
const Comp2 = (props) => { const [studies, setStudies]= useState([]); React.useEffect( ()=>{ setStudies(props.studies) },[props.studies, studies]); return( studies.map((study)=>{console.log(study)}) }EDITAR
const Comp2 = (props) => { // for some brief time props.studies will be an empty array, [] // you need to decide what to do while props.studies is empty. // you can show some loading message, show some loading status, // show an empty list, do whatever you want to indicate // progress, dont anxious out your users return ( props.studies.map((study)=>{console.log(study)} ) }El uso de Hook Effect depende de las actualizaciones que reciban los estudios de estado. Dentro de este gancho useEffect, actualiza los estudios. ¿Puedes ver que el useEffect se dispara solo?
A actualiza B. A se ejecuta cada vez que se actualiza B. (sigue para siempre)
¿Cómo lo haría?
const Comp1 = () => { const [studies, setStudies]= useState([]); React.useEffect(() => { const asyncCall = async () => { await axios.get('/api/expert/', ) .then((response) => { setStudies(response.data.studies); }, (error) => { console.log(error ); }) console.log("called+ "+ studies); } asyncCall(); }, []); return( <Comp2 studies={studies}/> ) }useEffect() tiene una matriz de dependencia que hace que se ejecute si se actualiza algún valor dentro de él. Aquí, setStudies actualiza studies que se proporcionan como matriz de dependencias y hace que se ejecute de nuevo y así sucesivamente. Para evitar esto, elimine studies de la matriz de dependencia. Consulte: Cómo funciona el gancho useEffect (con ejemplos)