如何解决通过setState更新变量,但在尝试将事件的旧值写入本地存储时会保存该事件的旧值 说明:情况:
即使我有解决这个问题的方法,我也想了解当前方法的缺失/错误之处,即使我试图在此处找到一种解释,但并不能得出一个成功的结论。
说明:
<input required type="text" className="form-control" id="hotelName" name="hotelName" onChange={this.onInputChange} />
并在其onChange函数每次正常工作时将其正确保存到localStorage
onInputChange(event) {
localStorage.setItem('hotelCreateStep1',JSON.stringify(event.target.value));
}
情况:
因此,当我想像下面这样将event.target.value
写入状态对象然后再写入localStorage时,它将写入对象的先前值,例如缺少最后键入的字母或任何形式的输入尝试。 / p>
onInputChange(event) {
this.setState({
hotelCreateStep1:{
...this.state.hotelCreateStep1,[event.target.name]: event.target.value
}
});
localStorage.setItem('hotelCreateStep1',JSON.stringify(this.state.hotelCreateStep1));
}
我想知道为什么即使我将其与setState
绑定在一起,它为什么仍保留对象的先前值。如上所述,我的目的是设置状态并保留在localStorage上。
解决方法
react中的
setState
是异步的。因此,每当您调用setState
时,该值都不会被其自身反映。有关setState
及其使用的callback
的更多信息,请参考here。
所以可以通过两种方式解决问题
- 使用
setState
回调来更新localStorage
,如下所示
onInputChange(event) {
this.setState({
hotelCreateStep1:{
...this.state.hotelCreateStep1,[event.target.name]: event.target.value
}
},() => {
localStorage.setItem('hotelCreateStep1',JSON.stringify(this.state.hotelCreateStep1))
});;
}
- 或直接在
event.target.value
中使用localStorage
值
onInputChange(event) {
this.setState({
hotelCreateStep1:{
...this.state.hotelCreateStep1,[event.target.name]: event.target.value
}
});
localStorage.setItem('hotelCreateStep1',event.target.value);
}
,
这是因为setState()
是异步的。使用回调函数可以达到目的。
onInputChange(event) {
this.setState({
hotelCreateStep1:{
...this.state.hotelCreateStep1,[event.target.name]: event.target.value
}
},() => localStorage.setItem('hotelCreateStep1',JSON.stringify(this.state.hotelCreateStep1))
);
}
我最近写了一篇关于这方面的文章。选中here
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。