React SWR中loading始终未设为false，无法展示数据求助

核心问题 #

1. SWR无内置loading属性：你从useSWR解构的loading和bagLength并非SWR默认返回值，所以始终是undefined。
2. 请求函数传递错误：useSWR的第二个参数需要是返回Promise的函数，你直接调用getTodos(id, currentCatId)会导致函数立即执行，SWR无法正确追踪请求状态。

修复步骤 #

步骤1：修正请求函数传递方式 #

将直接调用的函数改为返回函数的形式，让SWR控制请求时机：

const { data: bagList, error, mutate: mutateBags } = useSWR(AREAS_URL, () => getTodos(id, currentCatId));

步骤2：手动计算加载状态和列表长度 #

SWR通过data和error的存在状态判断加载中，自行计算loading和bagLength：

const loading = !bagList && !error; // 数据未返回且无错误时为加载中
const bagLength = bagList?.length || 0;

步骤3：修复渲染逻辑 #

确保map函数语法正确（你的代码中箭头函数缺少返回内容）：

return (
  loading ? (
    <CardSkeleton />
  ) : (
    <Box>
      {bagList?.map((element, i) => (
        // 替换为你的实际元素渲染逻辑
        <div key={i}>{element.id}</div>
      ))}
    </Box>
  )
);

完整修正后代码示例 #

import useSWR from 'swr';

// ...其他组件逻辑

const { data: bagList, error, mutate: mutateBags } = useSWR(AREAS_URL, () => getTodos(id, currentCatId));
const loading = !bagList && !error;
const bagLength = bagList?.length || 0;

return (
  loading ? (
    <CardSkeleton />
  ) : (
    <Box>
      {bagList?.map((element, i) => (
        <div key={i}>{JSON.stringify(element)}</div>
      ))}
    </Box>
  )
);

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