Я создаю приложение погоды, основанное на React-Router, в котором я представляю прогноз на пять дней на плитки. После удара плиткой, будучи ссылкой на React Router's Link, пользователь видит другой компонент (Погода), который показывает более подробную информацию о выбранном дне. Следовательно, путь изменяется на localhost: 3000 / w /: {dateId}. Проблема заключается, однако, в том, что если я обновляю страницу, она вылетает, поскольку у нее нет данных для отображения. Я включил в него localStorage:
Когда пользователь вводит имя и хиты города, введите:
handleFormSubmit = () => {
geocodeByAddress(this.state.address)
.then(results => getLatLng(results[0]))
.then(latLng => {
const lat = latLng.lat;
const lng = latLng.lng;
this.setState({
lat,
lng
});
fetch(
`https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`
)
.then(response => react.json())
.then(data => {
const dataWeather = data;
this.setState({
data: dataWeather.list,
refresh: false
});
localStorage.setItem("weather", JSON.stringify(data));
});
})
.catch(error => console.error("Error", error));
};
и две функции, которые затем вызываются в componentDidMount:
hydrateStateWithLocalStorage() {
for (let key in this.state) {
if (localStorage.hasOwnProperty(key)) {
let value = localStorage.getItem(key);
}
try {
let value = JSON.parse(value);
this.setState({ [key]: value });
} catch (e) {
let value = ""
this.setState({ [key]: value })
}
}
} saveStateToLocalStorage() {
for (let key in this.state) {
localStorage.setItem(key, JSON.stringify(this.state[key]))
}
}
Это, однако, работает некорректно, так как когда я обновляю страницу (находясь на определенном / w /: dateId), все приложение аварийно завершает работу, даже если в Chrome DevTools под Вкладка приложения отображается правильно.
Есть ли что-то, что я делаю неправильно с localStorage?
Измените нижеследующую функцию -
Проблема: вы обновили код
value
внутриif
иtry
.