Почему 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

Это известная проблема. Вы обновляете state с помощью события onChange. Но вы используете this.state.name без настройки состояния. Поскольку setState является async, попробуйте использовать значение state в callback следующим образом.

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

Answer 2

setState не автоматически обновляет объект состояния в реакторе. Вы можете использовать target.value при хранении в localStorage.

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

Проверьте React Documentation для получения дополнительной информации

Answer 3

См React.js docs:

SetState() не сразу мутировать this.state, но и создает ожидающий переход состояния. Доступ к this.state после вызова этого метода может потенциально вернуть существующее значение.

Чтобы это исправить, вы можете передать функцию обратного вызова для setState или использовать componentDidUpdate:

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