Question

我有一个网站可以做两件事之一。如果您从未访问过该站点，则会询问存储在localstorage中的信息，然后将其转到主要内容。如果您之前填写了信息，那么它会直接转到主要内容。这一切都在一个页面中完成。

目前，我的主要内容页面仅适用于页面重新加载。这是因为React没有localstorage数据来加载主要内容。它只是在加载页面时呈现。如上所述，这一切都发生在同一页面上。

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

我想在click事件上重新启动render函数。为此，我已经改变了我的代码。请注意，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更改组件的状态。

如何更新React localstorage？

1 个答案: