爲什麼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爲async，請嘗試按如下方式使用callback中的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); 
}, 

Answer 2

setState不會自動更新React中的狀態對象。當您存儲在localStorage中時，您可以使用target.value。

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