React中使用SWR遇数据始终未定义及多次API调用问题求助

核心问题1：useSWR的fetcher用法错误 #

你现在直接调用ProductService.GetListTransactionsByParams(...)作为useSWR的第二个参数，这会导致两个问题：

• 组件每次渲染时都会立即执行这个API请求，所以出现三次调用（对应组件三次渲染）
• SWR无法正确管理请求生命周期，因为它期望接收的是返回Promise的函数，而不是直接执行函数得到的Promise实例

修复代码：
把fetcher改成函数形式，让SWR自行控制调用时机：

// 写法一：箭头函数包裹避免立即执行
const {data, isLoading, error} = useSWR(
  ["transactions", clientUserName, productNumber, 10], 
  () => ProductService.GetListTransactionsByParams(clientUserName, productNumber, 10)
);

// 写法二：利用SWR key的参数传递，更规范
const {data, isLoading, error} = useSWR(
  ["transactions", clientUserName, productNumber, 10], 
  ([_, userName, productNum, maxCount]) => 
    ProductService.GetListTransactionsByParams(userName, productNum, maxCount)
);

核心问题2：请求函数的潜在异常点 #

检查你的GetListTransactionsByParams函数：

• bearer变量是null，如果API要求有效的Token鉴权，这会直接导致请求失败，返回数据自然为undefined
• HandleResponseService如果在响应状态码非200时抛出错误，会被SWR捕获为error状态，此时data会保持undefined，可在组件里打印error确认是否是这个原因
• 若API返回的json.data本身为null/空数组，也会导致data无有效值，建议在请求函数里添加console.log(json)确认返回结构

额外优化建议 #

1. 组件里的空useEffect异步函数如果没有实际逻辑，直接删掉即可，避免触发不必要的渲染
2. 表格渲染时用可选链操作符更安全：

{data?.map((row) => (
  // ...你的行代码
))}

3. 不要用uuidv4()作为TableRow的key，这会导致每次渲染生成新key，破坏React的DOM复用机制，建议改用数据自带的唯一标识（比如row.id）

验证步骤 #

1. 修复useSWR的fetcher后，观察网络请求是否仅在key变化时触发（比如clientUserName或productNumber改变）
2. 在请求函数里添加日志，打印response和json，确认API是否返回了正确数据
3. 检查组件的error状态，排查是否存在请求失败的错误信息

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