ReactJs useState 首次设置空白文本答案

【问题标题】：ReactJs useState sets blank text for first timeReactJs useState 首次设置空白文本
【发布时间】：2020-07-07 12:22:21
【问题描述】：

我正在尝试更新我的状态值，然后将其用于 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;

你能帮我解决这个问题吗？

【问题讨论】：

状态更新是异步的。更新后的值将无法立即使用。您需要将逻辑移至useEffect。
这能回答你的问题吗？ useState set method not reflecting change immediately

标签： reactjs setstate use-state

【解决方案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，然后 react 可以更新您的组件

【讨论】：