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