2

Intento ejecutar una consulta a una api cuando existe un cambio en el estado consulta, pero se ejecuta por primera vez sin que existe un cambio:

import React, { useEffect,useState } from 'react';

import { Re } from '../helpers/help';


export const Formulario=()=>{

const [Valores,Setvalores]=useState({
pais:'',
ciudad:''
})


const [consultar,setconsulta]=useState(false)
const [temperatura,settemperatura]=useState({})
const handelvalor=(e)=>{

Setvalores({
    ...Valores,[e.target.name]:e.target.value
})

}



const Agregar=(e)=>{
e.preventDefault()
setconsulta(true)

}

useEffect(()=>{
    Re().then((resultadoapi)=>{settemperatura(resultadoapi)})}
    ,[consultar])

//...

Como veran cuando ejecuto el onsubmit cambio el estado del valor de consulta para que el useEffect ejecute el estado de consulta cuando cambie a true, pero se ejecuta solo por primera vez.

7
  • Que pasa si comentas el e.preventDefault()? Commented el 17 jul. 2021 a las 4:58
  • La primera vez que ejecutes la función Agregar(), el estado consultar pasa de ser false a ser true. Pero la segunda vez que llamas a esa misma función, ese estado va a intentar volver a setearse a true y como ya tenía ese valor de antes, entonces es muy probable que el useEffect() no detecte cambios y por lo tanto no vuelva a consumir la API. Commented el 17 jul. 2021 a las 13:54
  • Pero lo ejecuta por primera vez sin que cambie a true Commented el 17 jul. 2021 a las 15:02
  • ¿O sea que el estado consultar nunca cambia a true? Si es así entonces puede haber algún problema con la función Agregar(). Tal vez no se está ejecutando bien. ¿En qué momento la estás llamando? Commented el 17 jul. 2021 a las 15:21
  • 1
    Ah, ya entiendo. Como ya te explicaron en la respuesta que te dieron, es normal que useEffect() se ejecute por sí mismo la primera vez. Pero, ¿cuál es el comportamiento que estás buscando? ¿que la consulta a la API se ejecute solo cuando cambia el estado consultar? Si por alguna razón forzosamente tendría que ser así, quizás podría servirte poner la consulta a la API dentro de la función Agregar() para que se ejecute solo si llamas a esa función. Aunque personalmente no creo que esa sea la mejor opción. Pienso que lo ideal sería que sigas el consejo de @g.4 . Commented el 17 jul. 2021 a las 19:12

1 respuesta 1

2

Una función useEffect siempre sucederá después de que el componente reactJS se haya renderizado, pintado o devuelto (render/re-render) en el navegador.

En la documentación de reactJS se puede leer lo siguiente:

¿Se ejecuta useEffect después de cada renderizado? ¡Sí! Por defecto se ejecuta después del primer renderizado y después de cada actualización.

Entonces, estamos seguros de que useEffect se va a ejecutar por lo menos una vez y que además, ReactJS va a retrasar la ejecución de esta función useEffect hasta que el componente se haya "renderizado".

Lo que se puede hacer en este caso es controlar el comportamiento de useEffect.

Lógica dentro de useEffect

En este caso se puede usar lógica, para controlar cuando se puede hacer la llamada API, manejando el estado de la bandera consultar, una vez que ReactJS haya "renderizado" el componente Formulario:

useEffect(()=>{
    if(consultar){
        Re().then((resultadoapi)=>{settemperatura(resultadoapi)})
    } else {
        console.log("consultar es false, no API call")
    }
},[consultar]);

Devolver función Cleanup useEffect

Luego, se configura useEffect para regresar una función de Cleanup, esta función se va a encargar de regresar el estado consultar a false, cada que el componente Formuario se desmonte.

useEffect(()=>{
    if(consultar){
        Re().then((resultadoapi)=>{settemperatura(resultadoapi)})
    } else {
        console.log("consultar es false, no API call")
    }
    // cleanup
    return () => setconsulta(false);
},[consultar]);

Como se mencionó anteriormente, useEffect se dispara siempre, por lo menos una vez;

Ahora bien, en este caso en particular para que useEffect se dispare en posteriores re-renders, el estado consultar debe cambiar su valor, pues esta listado en las dependencias del efecto.

Si no se regresa la bandera consultar a false, su estado se quedará con el valor de true y por lo tanto, el efecto ya no se ejecutará en posteriores renderizados. Por eso la necesidad de usar la función cleanup.

Espero que esta respuesta sea de ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.