更新方法localstorageに反応しますか？

Question

私は2つのうちの1つを行うウェブサイトを持っています。サイトに行ったことがない場合は、localstorageに保存されている情報を尋ね、メインコンテンツに移動します。あなたが前に情報を記入しておけば、主な内容にあなたをまっすぐに連れて行きます。これはすべて1ページで行われます。

現在、私の主なコンテンツページは、ページの再読み込み時にのみ機能します。これは、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を使用してコンポーネントの状態を変更してください。