Estoy creando una aplicación para realizar un seguimiento de los hábitos, y cuando se dirige a un usuario a un panel, quiero que vea inmediatamente sus hábitos extraídos de una base de datos. He intentado llamar a useState desde useEffect, pero sé que hay problemas inherentes al hacerlo. Intenté proporcionar un segundo argumento para useEffect para evitar esto, pero sigo recibiendo un error de llamada de gancho no válido.
const Dashboard = () => { const [refetch, setRefetch] = useState(true); const [habits, setHabits] = useState([]); useEffect(() => { if(refetch){ fetch('/habits/getHabits', { method: "POST", headers: {"Content-Type": "application/json; charset=UTF-8"}, body: JSON.stringify({username: 'Phil'}) }) .then((data) => data.json()) .then((data) => { const habitCards = []; for(let habit of data.habits){ habitCards.push( <Habit key={habit.habitid} habitname={habit.habitname} moneyspent={habit.moneyspent} lasttime={habit.lasttime} /> ) } setHabits(habitCards); }) .finally(() => setRefetch(false)) } }, [refetch]) return ( <div className='dash'> <h1>Your habits:</h1> {habits} </div> ) }¿Cómo puedo modificar esto para que useEffect solo se llame cuando se cargue la página y el estado se actualice desde dentro?
Si desea que su efecto se ejecute solo una vez cuando se carga la página, pase una matriz de dependencia vacía [] como segundo parámetro.
Cuando pasa una matriz de dependencia vacía, le está diciendo a React que este efecto no depende de ningún valor de accesorios o estado, y que nunca necesita volver a ejecutarse.
useEffect(() => { fetch('/habits/getHabits', { method: "POST", headers: {"Content-Type": "application/json; charset=UTF-8"}, body: JSON.stringify({username: 'Phil'}) }) .then((data) => data.json()) .then((data) => { const habitCards = []; for(let habit of data.habits){ habitCards.push( <Habit key={habit.habitid} habitname={habit.habitname} moneyspent={habit.moneyspent} lasttime={habit.lasttime} /> ) } setHabits(habitCards); }) }, []) En este caso, ya no necesitaría su refetch estado de recuperación.
Puede leer más sobre los efectos de salto aquí .