0

Estoy practicando con un custom hook useFetch, tengo un formulario con dos inputs y dos botones:

import React from "react";
import Form from "../components/Form";
import useForm from "../hooks/useForm";
import useFetch from "../hooks/useFetch";

export default function LogInView(){
    
    const [handleChange, handleSubmit] = useForm({
        email: "",
        password: ""
    })

    const [state, getData] = useFetch("https://www.breakingbadapi.com/api/characters/3");

    const logIn = function(){
        getData();
        console.log("state ", state);
    }

    const forgotPassword = function(){
        console.log("Forgot password clicked");
    }

    return(
        <React.Fragment>
            <Form>
                <input onChange={handleChange} type="email" name="email" className="form-control" />
                <input onChange={handleChange} type="password" name="password" className="form-control" />
                <button 
                    type="submit" 
                    onClick={(e)=>{
                        handleSubmit(e, logIn);
                    }} 
                    className="btn btn-primary">
                    Enter
                </button>
                <button 
                    type="submit" 
                    onClick={(e)=>{
                        handleSubmit(e, forgotPassword);
                    }}
                    className="btn btn-outline-primary">
                    Forgot your password?
                </button>
            </Form>
        </React.Fragment>
    );
}

La idea es que cuando se hace click en el boton que tiene como valor Enter, se llama a la función logIn, la cual llama a una función getData, la cual es retornada por el custom hook useFetch :

const [state, getData] = useFetch("https://www.breakingbadapi.com/api/characters/3");

const logIn = function(){
    getData();
    console.log("state ", state);
}

Mi custom hook useFetch está de la siguiente forma:

import {useState, useEffect} from "react";

export default function useFetch(url = null){
    
    const [state, setState]  = useState({
        data: null,
        loading: false,
        error: null
    });

    useEffect(()=>{
        if (state.loading === true){
            const data = fetchData();
            setState({
                ...state,
                data
            });
            console.log("use effect end result", state);
        }
    }, [state]);

    function getData(){ //aquí se pretende actualizar el valor del loading para activar 
                        //useEffect
        setState({
            ...state,
            loading: true
        });
        console.log("Estado: ", state);
        setState({
            ...state,
            loading: false
        });
    }

    async function fetchData(){
        const response = await fetch(url);
        return await response.json();
    }

    return [state, getData];
}

La idea es que cada vez que state.loading cambie su valor, se active el useEffect, y dentro de useEffect se llama a la función fetchData, la cual hace una petición get de una API, pero el problema está que en la función getData, el primer setState no actualiza el state, ya que cuando hago el console.log del state sale en false, que es su valor predeterminado cuando se llama por primera vez a useFetch, aún cuando estoy cambiando su valor a true. Entonces al no cambiar su valor a true, useEffect no se activa, y no se produce la llamada a fetchData, y por lo tanto no obtengo la respuesta a mi petición get. No entiendo por qué setState no actualiza el valor del atributo state.loading

1 respuesta 1

1

No llames dos veces consecutivas setState en la función getData, intenta siempre de escribir toda la lógica por separado para que sea más fácil reconocer los errores, intenta así:

 export default function useFetch(url = null){
       const [response, setResponse] = useState(null);
       const [fetching, setFetching] = useState(false);
    
       const getData = () => setFetching(true);
    
       async function fetchData(){
           const response = await fetch(url);
           return await response.json();
       }
    
       useEffect(()=>{
          if (fetching === true){
              const data = fetchData();
    
              console.log("use effect end result", data);
    
              setResponse(data)
              setFetching(false);           
          }
      }, [fetching]);
    
       return [response, getData];
    }
    

En lugar de colocar todo en un solo state, hazlo por separado, cuando fetching es true, es el equivalente a estar "loading"

2
  • Me ayudó tu respuesta, sin embargo en el console.log que está debajo de la llamada a getData() en la función logIn(), en LogInView.js, que es el primer bloque de código que mostré arriba, ese console.log("state ", state); se está ejecutando antes de que response obtenga el resultado de la llamada a getData(), y entonces el state está en null, como si no esperara a que getData() cambie el valor del response en respuesta de la petición get de fetch en useFetch
    – Jesus Diaz
    el 1 abr. 2022 a las 15:18
  • tal vez es porque la función "login" no es asíncrona, entonces a pesar de que "getData" es asíncrona, es llamada dentro de "login" que no lo es, entonces no espera a que "getData" se ejecute, intenta haciando login como async y "await" para getData o escribe getData.then((result)=>{console.log(result})
    – yucatan
    el 1 abr. 2022 a las 17:41

Tu Respuesta

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

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