如何更新React localstorage？

Question

我有一個網站，做兩件事情之一。如果您從未去過網站，它會詢問存儲在本地存儲中的信息，然後將其轉到主要內容。如果您之前填寫了信息，那麼它會直接轉到主要內容。這全部在一個頁面中完成。

目前，我的主要內容頁面只適用於頁面重新加載。這是因爲React沒有本地存儲數據來加載主要內容。它只是渲染加載頁面。如上所述，這一切都發生在同一頁面上。

<script type="text/babel"> 
var Weatherapp = React.createClass({ 

render: function(){ 
var weatherplace = localStorage.getItem('yourlocation'); 
var weatherplaceshared = localStorage.getItem('yourlocation').replace(/,/g, ", "); 
var weathervane = new XMLHttpRequest(); 
weathervane.open('GET', 'http://api.openweathermap.org/data/2.5/weather?q='+weatherplace+'&appid=stuff', false); 
weathervane.send(null); 
var runthru = JSON.parse(weathervane.response); 
var weathervalue = runthru.main.temp; 
var weatherimage = runthru.weather[0].icon; 
var weatherimageplace = "http://openweathermap.org/img/w/"+weatherimage+".png"; 
return (
<div id="weatherapp_container"> 

<div id="weatherapp_location">{weatherplaceshared}</div> 
<div id="weatherapp_icon"><img src={weatherimageplace}/></div> 
<div id="weatherapp_temperature"><p>{weathervalue}&deg;F</p></div> 


</div> 
)} 

}); 

ReactDOM.render(<Weatherapp />, document.getElementById('weatherapp')); 
</script> 

我想重新啓動點擊事件的渲染功能。爲此，我改變了我的代碼。請注意，submitsuestado是第一次存儲輸入後激活我的功能的按鈕。

render: function(){ 
document.getElementById('submitsuestado').addEventListener('click', function(){ 
var yourcity = document.getElementById('suciudad').value; 
var yourstate = document.getElementById('suestate').value; 
localStorage.setItem('yourlocation', yourcity+","+yourstate); 

從那裏我重複其餘的代碼在上面。但是，這不起作用。我試圖瞭解錯誤的位置，以及我可以做些什麼來確保Weatherapp在頁面加載時既存儲本地存儲數據，又存儲本地存儲數據的新頁面。

Answer 1

您的點擊事件只是將值保存到localstorage中，它不會更改組件的狀態，因此反應將無法呈現。如果你想渲染你的組件，只要試着把你的按鈕放到你的組件中，並使用setState來改變組件的狀態。