Actualmente estoy tratando de realizar una solicitud a mi API usando React Query. Cuando registro mis datos dentro del alcance de la función del componente, registra bien y proporciona los datos que espero, también registra los datos correctos antes de que lo haga handleSubmit. Cuando registro mi variable de datos dentro de handleSubmit, después de enviarla, siempre se registra indefinida.

// useSignup.ts

import axios from "axios";
import { useMutation } from "react-query";

const signup = (credidentials: any) => {
    return axios.post("/api/signup", credidentials);
};

const useSignup = () => {
    return useMutation(signup);
};

export default useSignup;
// Signup.tsx

const {
    mutateAsync: makeApiRequest,
    isLoading,
    isSuccess,
    isError,
    data: authData,
} = useSignup();

console.log(authData); // Updates fine and gives the correct data

const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    await makeApiRequest(input);
    console.log(authData); // Always undefined
};
0
SamTheFam 11 may. 2021 a las 20:00

1 respuesta

La mejor respuesta

Porque awaiting makeApiRequest, en el mismo controlador de eventos, no hace que los datos del gancho "definan" inmediatamente después de eso. Es similar a:

const [count, setCount] = React.useState(undefined)

<button onClick={() => {
  setCount(1)
  console.log(count)
}) />

Aquí, el registro del recuento también será undefined, ya que solo se establecerá en 1 en el próximo ciclo de renderizado. ser async no cambia eso, así es como funciona reaccionar.

Si desea acceder a los datos después de un envío exitoso, use la devolución de llamada onSuccess de la función mutate:

makeApiRequest(input, { onSuccess: newData => console.log(newData) }

También puede usar mutateAsync, que devuelve datos de la mutación, pero necesita detectar errores manualmente y no creo que esto sea necesario a menudo.

1
TkDodo 11 may. 2021 a las 17:23