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

Answer 2

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

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

我最近写了一篇关于这个的帖子。检查here