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

llievredemars спросил: 12 мая 2018 в 04:06 в: javascript

Я создаю приложение погоды, основанное на 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?


1 ответ

Vivek ответил: 12 мая 2018 в 04:57

Измените нижеследующую функцию -

Проблема: вы обновили код 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 })
      }
    }
  }
llievredemars ответил: 12 мая 2018 в 05:13
Я удалил объявление для значения в самом начале цикла for, однако проблема все еще присутствует
Vivek ответил: 12 мая 2018 в 05:13
@llievredemars, это правильно и соответствует моему ответу, я просто подумал, что вы хотите ограничить только json для значений, а также установить его в пустую строку
Vivek ответил: 12 мая 2018 в 05:15
@llievredemars, тогда вы должны проверить свою инициализированную часть программы, поскольку я тестировал выше функцию, и она работает как ожидалось
llievredemars ответил: 12 мая 2018 в 05:16
Правильно, но это все еще не устраняет проблему localstorage, которая на самом деле не сохраняет состояние