时间戳

首页 > 解决方案 > ReactJs useState 首次设置空白文本

reactjs - ReactJs useState 首次设置空白文本

问题描述

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

在此处输入图像描述

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

标签： reactjssetstateuse-state

解决方案

要解决您的问题，您应该将所有数据传递到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，然后反应可以更新您的组件

推荐阅读