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));
}

Answer 1

那是因为 setState() 是异步的。使用回调函数来实现。

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

我最近写了一篇关于那个的 post。检查 here

Answer 2

setState在react中是异步的。因此，每当您调用 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))
  });;
}

或者直接在localStorage

event.target.value

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

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

setState logs older value when attempted saving it to LocalStorage

events

onchange

local-storage

setstate

reactjs

解释：

情况：