ReactJs useState 第一次设置空白文本

Question

我正在尝试更新我的状态值，然后将其用于 axios 以将用户详细信息发送到我的 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};

但在这种情况下，如果您调用 addUser 更多，则可以使用旧的 UserDetail 然后反应可以更新您的组件

ReactJs useState 第一次设置空白文本

ReactJs useState sets blank text for first time

setstate

reactjs

use-state