通过setState更新变量，但在尝试将事件的旧值写入本地存储时会保存该事件的旧值 说明：情况：

编程问答 2022-06-12

问题描述

即使我有解决这个问题的方法，我也想了解当前方法的缺失/错误之处，即使我试图在此处找到一种解释，但并不能得出一个成功的结论。

说明：

我有一个如下所示的输入字段，用于检查用户键入的时间

<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

eventseventseventslocal-storageonchangeonchangereactjsreactjsreactjsreactjssetstatesetstate