React/Next.js中SWR(useSWR)运行机制及返回undefined问题排查

问题根因 #

SWR 本身没有内置请求发送逻辑，你调用 useSWR 时只传了请求地址（也就是缓存 key），没有传入第二个必填参数 fetcher 请求函数，因此 SWR 无法发起请求拿到返回值，data 自然是 undefined。

SWR 核心工作原理 #

• useSWR 接收三个参数：缓存 key（通常就是请求地址）、fetcher 请求函数、配置项
• 组件首次渲染时，如果没有对应 key 的本地缓存，会直接返回 undefined 作为 data，同时后台调用你传入的 fetcher 函数发送请求
• 请求成功后 SWR 会更新本地缓存，触发组件重渲染，返回拿到的请求数据
• 后续 SWR 会自动根据配置做缓存复用、后台重校验、错误重试等逻辑，不需要你手动管理请求状态

修复方案 #

方案1：直接复用你已经写好的请求函数作为 fetcher #

首先调整你的 getAllEvents 函数，适配 fetcher 接收缓存 key 作为入参的规则：

export const getAllEvents = async(url)=>{
    const response = await fetch(url);
    const data = await response.json();
    const events = [];

    for (const key in data){
        events.push({
            id:key,
            ...data[key]
        });
    }
    return events;
}

调用 useSWR 时传入该函数即可：

import useSWR from 'swr';
import { getAllEvents } from '你存放该函数的文件路径';

// 第二个参数传入fetcher
const {data, error, isLoading} = useSWR('https://*******-rtdb.firebaseio.com/events.json', getAllEvents);
console.log(data);

你可以通过 isLoading 字段判断请求是否完成，避免空值报错。

方案2：全局配置 fetcher（适合项目内所有请求格式统一的场景） #

如果是 Next.js 项目，可以在根布局文件（_app.js / app/layout.js）中全局配置 fetcher，之后所有 useSWR 调用都不需要重复传 fetcher 参数：

import { SWRConfig } from 'swr'

export default function App({ Component, pageProps }) {
  return (
    <SWRConfig 
      value={{
        // 这里可以根据你的业务需求统一处理请求逻辑，比如加请求头、错误处理等
        fetcher: (url) => fetch(url).then(res => res.json())
      }}
    >
      <Component {...pageProps} />
    </SWRConfig>
  )
}

全局配置后，你原本的代码就能拿到接口返回的原始 JSON 数据，自行遍历组装成需要的 events 数组即可。

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