React中useSWR条件调用报错，如何先处理空参数再请求？

核心思路 #

React Hook规则要求Hook必须在组件渲染的固定顺序中调用，不能放在条件语句之后。我们可以通过控制SWR的请求触发时机或拆分组件来实现先处理空参数、再安全调用useSWR的需求。

方案一：用条件化请求Key跳过无效请求 #

利用SWR的特性：当请求Key为null/false时，SWR会自动跳过网络请求。将useSWR移到组件顶部，通过参数判断动态生成请求Key，再在后续逻辑里处理空参数和请求状态：

export default function Model() {
    const searchParams = useSearchParams();
    const selectedMatch = searchParams.get("data");

    // Hook始终在组件顶部调用，用条件Key控制是否发起请求
    const { data, error, isLoading } = useSWR(
        selectedMatch ? ["api/model", selectedMatch] : null,
        fetcher
    );

    // 先处理空参数场景
    if (!selectedMatch) {
        return <p>no data is found</p>;
    }

    // 再处理请求状态
    if (isLoading) return <p>Loading...</p>;
    if (error) return <p>Failed to load data</p>;

    return (/* 渲染数据的JSX */);
}

方案二：拆分组件分离逻辑 #

将参数校验和数据请求拆分为两个组件：父组件负责判断参数是否有效，只有参数合法时才渲染包含useSWR的子组件，从根源上避免Hook在条件后调用：

// 父组件：仅处理参数校验和路由逻辑
export default function Model() {
    const searchParams = useSearchParams();
    const selectedMatch = searchParams.get("data");

    if (!selectedMatch) {
        return <p>no data is found</p>;
    }

    // 参数有效时才渲染子组件，子组件可安全调用Hook
    return <ModelDataLoader selectedMatch={selectedMatch} />;
}

// 子组件：专注数据请求与渲染
function ModelDataLoader({ selectedMatch }) {
    const { data, error, isLoading } = useSWR(
        ["api/model", selectedMatch],
        fetcher
    );

    if (isLoading) return <p>Loading...</p>;
    if (error) return <p>Failed to load data</p>;

    return (/* 渲染数据的JSX */);
}

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