mis ganchos personalizados:
import { useContext, useState } from "react"; import { AppContext } from "../context/app.context"; const usePostAxios = (url) => { const [isLoading, setIsLoading] = useState(false); const [data, setData] = useState(null); const [error, setError] = useState(null); const { setUrl, token } = useContext(AppContext); const postData = async (data) => { try { setIsLoading(true); axios.defaults.headers.common["X-Authreq"] = token; await axios .post(`${setUrl}/${url}`, data) .then(({ data }) => { setData(data); }) .catch((err) => { setError(err.response || err.request); }); setIsLoading(false); } catch (err) { console.log(err); } }; return [isLoading, postData, data, error]; }; export { usePostAxios };para publicar datos:
const [isPosting, postFun, res, err] = usePostAxios("/apidet/EmpLog"); const handleSubmit = async (val) => { await postFun({ UserName: val.email, password: val.pass, }); if (res) { const { Apd, Apt } = res.ResponseData; dispatch({ type: "APP-LOGIN", token: `${Apd}:${Apt}` }); setIsError(false); navigate("Home"); return; } else { setIsError(true); return; } };entonces, ¿por qué mi código ingresa en el bloque else y obtiene un error, pero cuando presiono el botón Enviar nuevamente, el código se ejecuta correctamente y mi proceso de inicio de sesión es exitoso?
Entonces, ¿por qué mi código no se ejecuta en el primer intento?
¿Estoy haciendo algo estúpido?
Bueno, escrito de esta manera, básicamente, cuando se ejecuta este código
if(res) { // Something to do with result } la variable res tiene valor null , inicialmente.
En su lugar, debe verificar los cambios en res con useEffect , como:
useEffect(()=> { if(res) { // Something to do with result } }, [res])