React页面刷新后旧状态延迟渲染问题求助（react-query v5）

问题背景 #

React应用使用react-query v5获取天气数据，页面刷新后出现状态不一致：

• 温度符号（°C/°F/°K）能正确渲染持久化后的状态
• 温度数值却停留在旧状态，只有在VS Code做无关修改（比如加注释）保存触发热重载后，数值才会更新为正确值
• 控制台能正确打印当前选中的温度单位名称，但weatherData返回的温度值总是滞后一步

核心代码片段：

const tempU = [
        {
            id: 0,
            name: 'metric',
            symbol: 'C'
        },
        {
            id: 1,
            name: 'imperial',
            symbol: 'F'
        },
        {
            id: 2,
            name: 'standard',
            symbol: 'K'
        },
    ]

const WeatherDisplay = () => {
    const [currentPosition] = useAtom(currentPositionAtom)
    const [tempUnitID, setTempUnitID] = useAtom(tempUnitIDAtom)

    const selectedTempUnitName = tempU[tempUnitID] && tempU[tempUnitID].name
    console.log('selectedTempUnitName: ', selectedTempUnitName)

    const { data: weatherData, refetch } = useGetCurrentWeather({ 
        currentPosition, 
        selectedTempUnitName
    })

    return (
        <div className={`${style['WeatherDisplay']}`}>
            <h1 className={`${style['temperature']}`}>
                <span onClick={setTemperatureUnitHandler}>
                    {/* 页面刷新后显示旧状态，延迟更新 */}
                    {weatherData?.main && Math.round(weatherData?.main.temp)}
                    {/* 始终正确显示 */}
                    °{tempU[tempUnitID].symbol}
                </span>
            </h1>
        </div>
    );
};

export default WeatherDisplay;

问题根源 #

这是react-query的缓存机制导致的：

1. 页面刷新时，react-query会优先返回缓存中的旧数据，此时持久化的温度单位状态已经加载完成，但react-query没有自动触发新请求去获取对应单位的天气数据
2. 热重载触发组件重新渲染时，react-query检测到selectedTempUnitName参数变化，才会发起新请求更新数据
3. 温度符号直接从原子状态读取，不依赖react-query缓存，所以始终显示正确

解决方法 #

方法1：修改react-query查询配置，强制挂载时请求最新数据 #

在自定义的useGetCurrentWeather hook中，设置staleTime: 0和refetchOnMount: true，确保组件挂载时不管缓存是否存在，都重新请求数据：

const useGetCurrentWeather = ({ currentPosition, selectedTempUnitName }) => {
  return useQuery({
    queryKey: ['currentWeather', currentPosition, selectedTempUnitName],
    queryFn: () => {
      // 这里是你的天气数据请求逻辑
      return fetch(`/api/weather?lat=${currentPosition.lat}&lon=${currentPosition.lon}&units=${selectedTempUnitName}`)
        .then(res => res.json())
    },
    staleTime: 0, // 数据立即标记为过期
    refetchOnMount: true, // 组件挂载时强制重新获取数据
  })
}

方法2：监听温度单位变化，手动触发数据刷新 #

在WeatherDisplay组件中添加useEffect，监听selectedTempUnitName的变化，一旦单位改变就调用refetch方法：

const WeatherDisplay = () => {
    // ... 现有代码

    const { data: weatherData, refetch } = useGetCurrentWeather({ 
        currentPosition, 
        selectedTempUnitName
    })

    // 当温度单位或位置变化时，重新获取数据
    useEffect(() => {
        if (currentPosition?.lat && currentPosition?.lon) {
            refetch()
        }
    }, [selectedTempUnitName, currentPosition, refetch])

    // ... 渲染代码
};

方法3：确保查询Key包含所有依赖参数 #

检查useGetCurrentWeather中的queryKey是否完整包含currentPosition和selectedTempUnitName。react-query通过queryKey区分不同的查询，如果缺少参数，会认为是同一个查询，不会更新数据：

// 正确的queryKey示例（拆分位置坐标更严谨）
queryKey: ['currentWeather', currentPosition.lat, currentPosition.lon, selectedTempUnitName]

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