react 中的 useState 没有更新状态对象

Question

我创建了一个 stateObject 并在输入数据发生变化时更新状态 form.I 想要在用户输入表单时清除“error”键中的值。

我尝试在第一个 step.However 中使用 setState 将错误键设置为空，但它不起作用。但是当我在第二步中尝试相同时，错误键正在更新为空字符串 properly.I 无法理解为什么第二步有效而不是第一步。有人可以解释一下吗？

const [userdata,setuserData] = useState({name:"",email:"",password:"",error:""});

const {name, email, password , error } = userdata;

//runs when the onchange click event works

const handleChange = (name)=> (event) =>{
    setuserData({...userdata,error:""}) // First Step- This line is not working
    setuserData({...userdata,[name]:event.target.value,error:""}); //Second Step - This is working
}

return (
<div className="container">
    <h2 className="mt-5 mb-5">Signup</h2>
    
    {/* inline Conditional Rendering*/}
    <div className="alert alert-primary" 
         style={{display:error ? "" : "none"}}>
        {error}
    </div>

    <form>
        <div className="form-group">
                <label className="text-muted">Name</label>
                <input 
                onChange={handleChange("name")}
                value={name}
                type="text" className="form-control"/>
        </div>
        <div className="form-group">
                <label className="text-muted">Email</label>
                <input 
                onChange={handleChange("email")}
                value={email}
                type="email" className="form-control"/>
        </div>
        <div className="form-group">
                <label className="text-muted">Password</label>
                <input 
                onChange={handleChange("password")}
                value={password}
                type="password" className="form-control"/>
        </div>
        <button className="btn btn-raised btn-primary"
        onClick={handleSubmit}>
            Submit
        </button>
    </form>
</div>  )

Answer 1

状态设置是异步和批处理的。当您调用 setuserData 时，先前的 userdata 不会立即更新。因此，只有 setuserData 的 final 调用会在下一次渲染时产生新状态。

您需要在一次调用中同时设置这两个属性（或者使用回调形式）：

setuserData({
  ...userdata,
  error: '', // or null?
  [name]: :event.target.value,
});

使用类似上面的东西，一次，或者使用：

setuserData(userdata => ({ ...userdata, error: '' }));
setuserData(userdata => ({ ...userdata, [name]: event.target.value }));

（但第二个版本是不必要的重复；第一个选项在可能的情况下更可取）

react 中的 useState 没有更新状态对象

useState in react is not updating the state object

reactjs

use-state