Question

我正在构建一个基于React-Router的天气应用程序，其中我在tile上呈现了五天的预测。在击中瓷砖后，实际上是React Router的Link，用户会看到另一个组件（Weather），它显示有关所选日期的更多详细信息。因此，路径更改为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中正确显示它。 / p>

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

localStorage不会在刷新时保留数据

1 个答案: