React Query结合map渲染子组件时所有项图片重复问题

所有TripItem显示相同图片的核心问题出在React Query的缓存键（queryKey）设置上：

你当前的useQuery使用固定的queryKey: ['image']，这个键是React Query区分不同查询的唯一标识。不管传入的place是什么值，所有TripItem组件的查询都会共用同一个缓存键，React Query会直接返回第一个查询的缓存结果，导致所有项加载同一张图片。

修改useCityImage中的queryKey，将动态的place值加入缓存键，确保每个城市的查询都有独立的缓存标识：

// 修改后的查询函数代码
const { data, isLoading } = useQuery({
  queryFn: () => getLink(place),
  queryKey: ['image', place], // 将place加入queryKey，作为缓存区分标识
  enabled: !!place, // 可选：只有当place存在时才发起请求，避免无效查询
});

额外优化建议 #

• 处理place为空的边界情况：通过enabled选项控制查询是否发起，避免因place为undefined或空字符串导致的无效API请求。
• 完善API返回处理：在getLink函数中增加对data.results为空的判断，比如返回一张默认图片，避免出现Cannot read properties of undefined的报错。

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