React函数组件中多次SWR调用无法返回数据的问题

核心错误点 #

• useSwr fetcher 参数传递错误：你直接调用了handleMatch(cookies, transactionId)和fetchOrder(cookies, transactionId)，这会在组件渲染时立即执行异步函数并返回Promise，但useSwr需要的是一个可被内部调用的函数，而非直接执行后的Promise结果。
• 变量名不匹配：加载判断时用了!match，但实际从useSwr解构的变量是matchData，导致逻辑错误，一直卡在Loading状态。
• 请求Key未包含动态依赖：如果cookies或transactionId变化，当前固定的Key（"/match"、"/orderdetails"）不会触发重新请求，必须把动态参数加入Key数组。

修复后的完整代码 #

const fetchOrder = async (cookies, transactionId) => {
    let options = {
        // 你的配置内容
    };
    let headerOptions = {
        // 你的请求头配置
    };

    let res = await fetch(Constants.API_ENDPOINT + "/orderdetails", {
        method: "POST",
        body: JSON.stringify(options),
        headers: headerOptions,
    })

    const json = await res.json();
    return json;
};

const handleMatch = async (cookies, transactionId) => {
    let optionsMatch = {
        // 你的配置内容
    };
    let headerOptionsMatch = {
        // 你的请求头配置
    };

    let res = await fetch(Constants.API_ENDPOINT + "/match", {
        method: "POST",
        body: JSON.stringify(optionsMatch),
        headers: headerOptionsMatch,
    })

    const json = await res.json();
    return json;
};

const OrderDetails = () => {
    // 假设cookies和transactionId从上下文/路由参数/Props获取
    const cookies = ...;
    const transactionId = ...;

    // 修复：用箭头函数包裹fetcher，同时将动态参数加入Key数组
    const { data: matchData, error: matchError} = useSwr(
        ["match", cookies, transactionId],
        () => handleMatch(cookies, transactionId)
    );
    const { data: orderData, error: orderError } = useSwr(
        ["orderdetails", cookies, transactionId],
        () => fetchOrder(cookies, transactionId)
    );

    // 合并错误与加载判断，变量名统一对应
    if (matchError || orderError) return <div>请求出错</div>;
    if (!matchData || !orderData) return <div>加载中...</div>;
    
    // 此处可正常访问matchData和orderData
    return (
        <div>
            <h3>订单详情</h3>
            {/* 渲染orderData内容 */}
            <h3>匹配信息</h3>
            {/* 渲染matchData内容 */}
        </div>
    )
}

额外说明 #

• 把动态参数加入useSwr的Key数组后，只要cookies或transactionId变化，useSwr会自动重新发起请求，保证数据最新。
• 合并错误和加载判断可以简化代码，避免重复的条件分支。
• 确保cookies和transactionId在组件内是可正常获取的（比如通过useContext、useParams或组件Props）。

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