The delay in setting the state is causing the API to receive the incorrect value

Question

I am using react-hook-form to manipulate the form data and react-query to make requests to the API. However, when Axios attempts to make a POST request, it passes an empty object {} as the user parameter. This happens because the setUser() function does not define the state before it is sent to the API call, resulting in an error. I will leave the code below with a comment indicating the relevant parts.

import React, { useContext, useEffect, useState } from 'react'
import { AuthContext } from '../../context/AuthContext'
import { ISessionContext } from '../../utils/types/interfaces/ISessionContext'
import { useQuery } from 'react-query'
import axios from 'axios'
import { useNavigate } from 'react-router'
import handleError from '../../utils/functions/handleErrors'
import ErrorDiv from '../../components/ErrorDiv'
import { useForm } from 'react-hook-form'

function Login() {
    const { setSessionInfos } = useContext(AuthContext)
    const [user, setUser] = useState({})
    const [error, setError] = useState('')
    const navigate = useNavigate()
    const key = ['auth']
    const { register, handleSubmit } = useForm()

    const { isLoading, data, isError, isFetching, refetch } = useQuery<ISessionContext | any>(key, async () => {
        console.log(user)
        const response = await axios.post(`http://localhost:3001/api/auth/login`, user) // the first request to api isnt getting the user for search in database
        return response.data;
    }, {
        enabled: false,
        onSuccess: (data) => {
            setSessionInfos(data)
            if (data.isAuth) {
                navigate('/home')
            }
        },
        onError: (error: any) => {
            const errorStatus: number = error.response.status
            const errorMessage = handleError(errorStatus)
            setError(errorMessage)
        },
        retry: 1
    })

    async function handleLogin(data: any) {
        setUser(data)
        console.log(user) // is returning {} the initial state
        await refetch()
    }

    return (
        <div className="col-center justify-center min-h-screen gap-8">
            <img src={CirculoIcon} alt="" className="w-56 lg:w-64" />
            <div className="col-center gap-8 p-5 w-[26rem] h-96 bg-white rounded-lg border border-princeton">
                <div className="flex flex-col gap-[2px]">
                    <h1 className="text-2xl text-center font-satoshi-bold">Bem-vindo</h1>
                    <p>Faça login para continuar</p>
                </div>
                <form className="col-center justify-center w-3/4" onSubmit={handleSubmit(handleLogin)}>
                    <label className="flex flex-col gap-1 w-full">
                        <p>Usuário:</p>
                        <input type="text" placeholder="Digite seu usuário" className="border border-gray-500 px-1 w-full rounded-md outline-none" {...register('user')} />
                    </label>
                    <label className="flex flex-col mt-3 gap-1 w-full">
                        <p>Senha:</p>
                        <input type="password" placeholder="Digite sua senha" className="border border-gray-500 px-1 rounded-md outline-none" {...register('password')} />
                    </label>
                    <label className="flex justify-center w-full mt-12">
                        <button className="border border-gray-500 w-full rounded-md py[2px] outline-none" type="submit">Entrar</button>
                    </label>
                </form>
                {isError && <ErrorDiv errorMessage={error} />}
            </div>
        </div>
    )
}

export default Login

How can I pass the data correctly to the request?

score 0 · Answer 1 · answered Jul 21 '23 at 02:48

useState is asynchronous, the user State won't update immediatly if you call setState in the handleLogin function, to pass the data correctly to the API request, you should directly pass your data from the react hook form directly in your handleLogin request instead of relying on the user state, but since I am not familiar with React Query you have to figure it out :)

I give you an example:

  async function handleLogin(data: any) {  //would be better to type the data form
    try {
      await axios.post(`http://localhost:3001/api/auth/login`, data);
      //... 


    } catch (error) {
      console.error('Error occurred during login:', error);
    }
  }

The delay in setting the state is causing the API to receive the incorrect value

1 Answers1