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