javascript - 如何更新React本地存储？

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

您的点击事件只是将值保存到本地存储中，它没有改变组件的状态，因此 react 不会渲染。如果您想渲染组件，只需尝试将按钮放入组件中，然后使用 setState 更改组件的状态即可。