如何解决react中的useState不更新状态对象
我创建了一个stateObject并在输入表单中的数据发生更改时更新状态。我想在用户键入输入表单时清除“错误”键中的值。
我尝试在第一步中使用setState将错误密钥设置为null,但是它不起作用。 但是当我在第二步中尝试相同时,错误密钥正确更新为空字符串。我无法弄清楚为什么第二步而不是第一步有效。有人可以解释一下吗?
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> )
解决方法
状态设置是异步的并且是批量的。调用Body
时,先前的userdata
不会立即更新。结果,只有setuserData
的 final 调用会在下一次渲染时产生新状态。
您需要在一个调用中一次设置两个属性(要么设置一次,要么使用回调形式):
setuserData
使用上述类似内容,一次,或使用:
setuserData({
...userdata,error: '',// or null?
[name]: :event.target.value,});
(但是第二个版本不必要重复;第一个选项在可能的情况下更可取)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。