React Router刷新含API调用的天气应用时数据丢失问题求助

嘿，我来帮你搞定这个问题！首先得说：不建议阻止用户刷新页面——这是浏览器的核心功能之一，强行拦截会严重影响用户体验。咱们从根源解决问题，有几个更友好的方案：

方案1：在路由层判断数据，无数据则重定向到首页 #

你可以修改Route的渲染逻辑，当weatherData不存在时，直接跳转到首页，避免Weather组件拿到undefined的day：

<HashRouter>
  <React.Fragment>
    <div className="columns is-gapless tiles">
      {this.generateTileData()}
    </div>
    <Route 
      exact path="/w/:dateId" 
      render={({ match, history }) => {
        // 如果没有天气数据，直接重定向到首页
        if (!weatherData) {
          history.push('/');
          return null;
        }
        const targetDay = weatherData.find(day => day.dt == match.params.dateId);
        // 额外加一层判断，防止dateId无效找不到对应日期
        if (!targetDay) {
          history.push('/');
          return null;
        }
        return <Weather data={weatherData} day={targetDay} />;
      }}
    />
  </React.Fragment>
</HashRouter>

方案2：给Weather组件加容错处理 #

即使路由没拦截到，也可以在Weather组件里做兜底，避免因为day为undefined而报错：

const Weather = ({ day }) => {
  // 如果没有day数据，显示提示或加载状态
  if (!day) {
    return <div className="info">暂无天气数据，请返回首页重新查询</div>;
  }
  
  return (
    <div className="info">
      <p>{day.main.temp}</p>
      <p>{day.main.humidity}</p>
    </div>
  )
}

方案3：持久化天气数据（推荐） #

把获取到的天气数据存在localStorage里，这样刷新页面后可以直接从本地读取，不用重新请求API，从根本上解决数据丢失的问题：

// 假设你在获取API数据的回调里添加这行
fetchWeatherData()
  .then(data => {
    this.setState({ data });
    // 把数据存到localStorage
    localStorage.setItem('weatherData', JSON.stringify(data));
  });

// 在组件初始化时读取本地存储的数据
componentDidMount() {
  const savedData = localStorage.getItem('weatherData');
  if (savedData) {
    this.setState({ data: JSON.parse(savedData) });
  }
}

关于阻止刷新的补充 #

如果一定要尝试拦截刷新（再次强调不推荐），可以监听浏览器的beforeunload事件，但这个事件只能弹出提示，无法完全阻止用户刷新：

componentDidMount() {
  window.addEventListener('beforeunload', this.handleBeforeUnload);
}

componentWillUnmount() {
  window.removeEventListener('beforeunload', this.handleBeforeUnload);
}

handleBeforeUnload = (e) => {
  e.preventDefault();
  // 浏览器会用这个字符串生成提示（不同浏览器可能显示不同）
  e.returnValue = '刷新后会丢失当前详情页数据，确定要刷新吗？';
}

综合来看，方案2+方案3是最优组合：既给组件加了容错兜底，又通过持久化数据保证刷新后依然能获取到天气信息，用户体验会好很多～

内容的提问来源于stack exchange，提问作者llievredemars