reactjs - setState 在尝试将其保存到 LocalStorage 时记录旧值

Question

即使有解决这个问题的方法，我也想了解为什么我下面的当前方法不成功。我想知道为什么本地存储会记录状态的先前值，即使它与之绑定setState？

解释：

有一个带有 onChange 功能的输入字段，用于检查用户何时键入并将其正确保存到 localStorage。

<input required type="text" className="form-control" id="hotelName" name="hotelName" onChange={this.onInputChange} />

onInputChange(event) {
    localStorage.setItem('hotelCreateStep1', JSON.stringify(event.target.value));
}

情况：

因此，当它打算在将其event.target.value写入 localStorage 之前将其写入状态对象时，如下所述，它会写入对象的先前值（仅丢失最后键入的字母或任何类型的输入尝试）。

onInputChange(event) {
    this.setState({
        hotelCreateStep1:{
            ...this.state.hotelCreateStep1,
            [event.target.name]: event.target.value
        }
    });
    localStorage.setItem('hotelCreateStep1', JSON.stringify(this.state.hotelCreateStep1));
}

标签： reactjseventslocal-storageonchangesetstate

Answer 1

setState在反应中是异步的。因此，无论何时调用setState，该值都不会反​​映在其本身上。有关更多信息setState及其callback需要的信息，请参阅此处。

所以这个问题可以通过两种方式解决

• 使用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);
}