React Query切换电影详情页显示旧数据问题求助

问题根源 #

你的useQuery的queryKey设置为["movieInfo"]，这个键对所有电影都是相同的。React Query会根据queryKey缓存数据，所以当你切换电影时，它会先返回上一部电影的缓存数据，直到新电影的请求完成。

修复方案 #

把movieId加入到queryKey中，让每个电影都有唯一的缓存键：

const { movieId } = useParams();
const { data: movieInfo, isLoading } = useQuery({
    queryKey: ["movieInfo", movieId], // 加入movieId作为缓存键的一部分
    queryFn: () => getMovieInfoById(movieId),
    onError: (err) => console.log(err),
});

这样React Query就会为每个电影维护独立的缓存，切换电影时会立即识别这是一个新的查询，不会再展示旧数据。

优化用户体验 #

配合isLoading状态，在数据加载时显示加载提示（比如骨架屏或加载动画），避免页面出现空白或闪烁：

if (isLoading) {
    return <div>加载中...</div>; // 替换成你的加载组件
}

if (!movieInfo) {
    return <div>电影不存在</div>;
}

// 渲染电影详情
return (
    <div>
        <h1>{movieInfo.title}</h1>
        {/* 其他详情内容 */}
    </div>
);

额外说明 #

• 现在每部电影的数据都会被单独缓存，当用户再次访问同一部电影时，会直接使用缓存数据，提升加载速度。
• 如果需要控制缓存的有效期，可以添加staleTime或cacheTime参数，比如设置staleTime: 5 * 60 * 1000（5分钟），表示5分钟内数据视为新鲜，不会重新请求。

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