localStorage не сохраняет данные при обновлении

Question

Я создаю приложение погоды, основанное на React-Router, в котором я представляю прогноз на пять дней для тайлов.После нажатия на плитку, которая на самом деле является ссылкой React Router, пользователь видит другой компонент (Погода), который показывает более подробную информацию о выбранном дне.Следовательно, путь меняется на 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 => response.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?

Answer 1

Изменить указанную ниже функцию -

Проблема: Вы повторно объявили value внутри if и try блока.

  hydrateStateWithLocalStorage() {
    for (let key in this.state) {
      let value = null;
      if (localStorage.hasOwnProperty(key)) {
        value = localStorage.getItem(key);
      }
      try {
        value = JSON.parse(value);
        this.setState({ [key]: value });
      } catch (e) {
        value = ""
        this.setState({ [key]: value })
      }
    }
  }