React问题：选中城市后天气详情无法更新

架构老林

2026-6-28

React天气应用问题：切换城市后天气详情不更新

问题背景

项目结构：

父组件App管理latitude和longitude状态
子组件DisplayFetch根据经纬度获取并展示天气详情
DisplayFetch内嵌子组件SearchCities支持搜索城市，选中后更新经纬度

问题表现：在SearchCities选择新城市后，App的经纬度已正确更新，但DisplayFetch展示的天气信息仍为原位置数据，未刷新。

已确认：App的updateLocation函数能正常更新经纬度状态，SearchCities选中城市时会调用update函数，经纬度更新逻辑正常。

问题原因

问题出在DisplayFetch组件的useEffect钩子上：

useEffect(() => {
  fetchData();
}, []);

该useEffect的依赖数组为空，仅会在组件首次挂载时执行一次fetchData。当App传递的latitude或longitude更新时，钩子不会重新触发，自然不会请求新城市的天气数据。

解决方案

修改DisplayFetch中的useEffect，将latitude和longitude加入依赖数组，让经纬度变化时自动重新请求数据：

useEffect(() => {
  fetchData();
}, [latitude, longitude]); // 添加经纬度作为依赖

同时建议在fetchData开始时重置loading状态，避免状态混乱：

const fetchData = async () => {
  setLoading(true); // 重置loading状态
  try {
    const response = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=MYAPI`
    );
    if (!response.ok) {
      throw new Error("Network response was not ok.");
    }
    const data = await response.json();
    setData(data);
    setLoading(false);
  } catch (error) {
    setError(error.message);
    setLoading(false);
  }
};