javascript - 为什么 localStorage 不保存该组件中的最后一个符号？

Question

在下面的代码中，当我更改输入文本时，localStorage 不会保存最后一个符号。就像我写 qwerty 一样，刷新它只给出 qwert。

let NameAndCity = React.createClass ({
getInitialState: function() {
return {
  name: this.props.name,
  city: this.props.city
};
},

componentWillMount: function() {
let username = localStorage.getItem('username')
let city = localStorage.getItem('city')
if(username && city){
  this.setState({
    name: username,
    city: city
  })
} else {localStorage.setItem('username', this.state.name)
localStorage.setItem('city', this.state.city)}
},

changeName(e){
this.setState({name: e.target.value})
localStorage.setItem('username', this.state.name)
},

changeCity(e){
this.setState({city: e.target.value})
localStorage.setItem('city', this.state.city)
},

render(){return (
<div className='name-and-city'>
  <input value={this.state.name} onChange={(e)=> this.changeName(e)}/>
  <input value={this.state.city} onChange={(e)=> this.changeCity(e)}/>
</div>
)}
})

Answer 1

这是一个已知问题。您正在使用 onChange 事件更新 state。但是您正在使用 this.state.name 而不设置状态。由于 setState 是异步，请尝试在回调中使用state值，如下所示。

changeName(e){
   var _this = this;
   this.setState({name: e.target.value}, function(){
       localStorage.setItem('username', _this.state.name);
   });
},

或

只需使用event.target.value存储在localStoarge

changeCity(e){
    this.setState({city: e.target.value}); //here state.name != e.target.value
    localStorage.setItem('city', e.target.value);
},