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

更改以下功能-

問題：您已在if和try塊內重新聲明了value 。

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