ReactJs useState устанавливает пустой текст в первый раз

Question

Я пытаюсь обновить значения своего состояния, а затем использовать его для топора ios, чтобы отправить данные пользователя в мой API, но в первый раз пользователь нажимает кнопку отправки формы регистрации, чтобы отправить свою информацию, useState кажется не работает, во-вторых если мое состояние имеет значение, это мой код:

import React, { createContext , useState, useEffect } from 'react';

export const RegContext = createContext();

const RegContextProvider = (props) => {

    const [UserDetail, setUserDetail] = useState({});

    const addUser = (first_name, last_name, phone_number) => {
        setUserDetail(UserDetail => ({...UserDetail, first_name, last_name, phone_number}));
        console.log(UserDetail);
        //after set state i need to send details to axios
        //axios.post('https://api.espadev.ir/api/v1/auth/auth/register' , {UserDetail}) 
        //first time server returns 400 error because state is empty and i should click again on my button to change state.
    }

    return (
        <RegContext.Provider value={{UserDetail, addUser}}>
            { props.children }
        </RegContext.Provider>
    );
}

export default RegContextProvider;

Можете ли вы помочь мне решить эту проблему?

Answer 1

Чтобы решить проблему, вы должны передать все данные в addUser

Например

const addUser = (newUserDetail ) => {
        setUserDetail(newUserDetail ));
        console.log(newUserDetail );
}

Вы можете увидеть новое состояние только в useEffect или объединить новые данные с UserDetail

const addUser = (first_name, last_name, phone_number) => {
  const newUserDetails = {...UserDetail, first_name, last_name, phone_number};

Но в этом случае вы можете использовать старый UserDetail, если вы позвоните addUser больше, чем может ответить, может обновить ваш компонент