无法使用useState更新状态

Question

我正在尝试使用注册功能组件中的useState更新组件的状态。当用户输入无效的电子邮件地址并单击“提交”按钮时，以下代码将返回错误消息

let response= await axios.post("/api/user/register",new_user,config);

我想用这段代码将错误消息设置为formData。

        let response= await axios.post("/api/user/register",new_user,config);
        if(response.data.errnum!==0){
            setFormData({...formData,errors:response.data.message})
            console.log(formData);
        }

如何将错误消息设置为formData？

这是我的密码：

import React ,{useState}from 'react'
import axios from "axios"

function Register() {

    const [formData,setFormData]=useState({
        name:"",
        email:"",
        password:"",
        password2:"",
        errors:{}
    });

    const {name,email,password,password2}=formData;

    const setValue= e =>setFormData({...formData,[e.target.name]:e.target.value})
    
    const submitData=async (e) =>{
        e.preventDefault();
        if(password!==password2){
            console.log("passwords do not match ");
        }else{
            let new_user={name,email,password,}
            try{
                let config={
                    header:{
                        'Content-Type':'applicaiton/json'
                    }
                }
                let response= await axios.post("/api/user/register",new_user,config);
                
                if(response.data.errnum!==0){
                    setFormData({...formData,errors:response.data.message})
                    console.log(formData);
                }
            }catch(error){
                console.error(error);
            }
        }
    }


    return (
        <div>
            <section className="container">
                <h1 className="large text-primary">Sign Up</h1>
                <p className="lead"><i className="fas fa-user"></i> Create Your Account</p>

                <form className="form" onSubmit={e=>submitData(e)}>
                    <div className="form-group">
                        <input 
                        type="text" 
                        placeholder="Name" 
                        name="name"
                        value={name}
                        onChange={e=>setValue(e)}
                         required />
                    </div>

                    <div className="form-group">

                        <input 
                        type="email" 
                        placeholder="Email Address" 
                        onChange={e=>setValue(e)}
                        value={email}
                        name="email" />
                        <small className="form-text">This site uses Gravatar so if you want a profile image, use aGravatar email</small>
                    </div>
                    <div className="form-group">
                    <input
                        type="password"
                        placeholder="Password"
                        onChange={e=>setValue(e)}
                        value={password}
                        name="password"
                        minLength="6"
                    />
                    </div>
                    <div className="form-group">
                    <input
                        type="password"
                        placeholder="Confirm Password"
                        onChange={e=>setValue(e)}
                        value={password2}
                        name="password2"
                        minLength="6"
                    />
                    </div>
                    <input type="submit" className="btn btn-primary" value="Register" />
                </form>
                <p className="my-1">
                    Already have an account? <a href="login.html">Sign In</a>
                </p>
            </section>
        </div>
    )
}

export default Register

Answer 1

您的代码中没有问题。您要做的是在设置状态时立即对其进行控制台操作。

setState是异步的，这意味着您不能在一行上调用它，而假定在下一行上状态已更改。

如果你查一下

setState（）不会立即改变此.state，但会创建挂起的状态转换。调用此方法后访问this.state，可能会返回现有值。无法保证对setState调用的同步操作，并且可能会对调用进行批处理以提高性能。

我建议您使用use效应，然后检查您的状态数据的变化。

useEffect(() => {
console.log(formData)
}, [formData])

Answer 2

我认为你所做的是错误的你是保存和对象内的另一个对象

const [formData,setFormData]=useState({
    name:"",
    email:"",
    password:"",
    password2:"",
    errors:{}
});

formData是一个对象，而errors也是一个对象。为了找到更好的方法，请为错误创建一个单独的状态，并将通过这些消息产生的所有错误附加到error对象中。如果您在定义错误的对象中写入消息，它将给您错误消息

errors:{"hi","bye"}