使用useSWRImmutable获取数据后UserRow组件无数据问题求助

问题现象 #

用useSWRImmutable拉取用户列表，组件外能正常打印UserList数据，但UserRow组件里的console.log完全没输出，组件也没渲染出来。

核心原因：映射函数未返回JSX元素 #

看你的数据映射代码，map回调里用了<>片段，但没写返回语句，导致回调函数默认返回undefined，自然不会渲染任何内容，包括UserRow。

修复方案 #

1. 修正映射函数的返回逻辑 #

把回调里的大括号改成小括号（隐式返回），或者显式添加return：

隐式返回写法（推荐）：

{UserList?.data?.length > 0 ? (
    UserList?.data?.map((data: any) => (
        <>
            {JSON.stringify(data)}
            <UserRow data={data} key={data.id} />
        </>
    ))
) : (
    <tr className="pointer-events-none">
        <td colSpan={6} className="p-8">
            <p className="mx-auto w-fit"> No data found.</p>
        </td>
    </tr>
)}

显式返回写法：

{UserList?.data?.length > 0 ? (
    UserList?.data?.map((data: any) => {
        return (
            <>
                {JSON.stringify(data)}
                <UserRow data={data} key={data.id} />
            </>
        );
    })
) : (
    <tr className="pointer-events-none">
        <td colSpan={6} className="p-8">
            <p className="mx-auto w-fit"> No data found.</p>
        </td>
    </tr>
)}

2. 额外优化点 #

• 补全请求错误处理：fetchUserList的catch块不要空着，打印错误并抛出，方便排查请求失败的情况：

const fetchUserList = async (url: any, filters: any) => {
    try {
        // 注意：axios.get的第二个参数是配置对象，过滤参数要放在params里
        const { data } = await axios.get(url, { params: filters });
        return data.data;
    } catch (error) {
        console.error('获取用户列表失败:', error);
        throw error; // 抛出错误让SWR捕获，触发error状态
    }
};

• 优化SWR的key：当router.isReady为false时，直接传null作为key，避免无效请求：

const {
    data: UserList,
    error,
    isLoading,
} = useSWRImmutable(router?.isReady ? ['/users', params] : null, ([url, filters]) => fetchUserList(url, filters));

• 添加类型定义：给UserList和data写明确的TypeScript类型，避免any带来的潜在问题。

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