SWR在循环渲染组件时始终返回相同分类数据的问题

问题出在SWR的缓存键重复：所有ProductCard组件调用useSWR时，都用了同一个缓存键'/api/category'，SWR会认为这些是同一个请求，直接复用第一个请求的缓存结果，不会发起新请求。

修复方案 #

方案1：将category作为缓存键的一部分 #

修改useSWR的缓存键，把唯一的category ID加入进去，让每个组件的缓存键唯一：

export default function ProductCard({ product, category }: ProductCardProps) {
    const getCategory = async () => {
        const { data } = await axios.get(`/api/category/${category}`);
        return data.name;
    };
    // 把category加入缓存键数组，确保每个组件的键唯一
    const { data } = useSWR(['/api/category', category], getCategory);
    console.log(data);
}

方案2：直接用完整请求URL作为缓存键 #

更直观的方式是把完整的请求URL作为缓存键，同时让getCategory接收SWR传递的键参数：

export default function ProductCard({ product, category }: ProductCardProps) {
    const getCategory = async (url: string) => {
        const { data } = await axios.get(url);
        return data.name;
    };
    // 用完整URL作为缓存键，每个组件的键唯一
    const categoryUrl = `/api/category/${category}`;
    const { data } = useSWR(categoryUrl, getCategory);
    console.log(data);
}

这两种方案都能让SWR识别每个ProductCard的请求是独立的，分别缓存和返回对应分类的数据。

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