AlovaJS 中 actionDelegationMiddleware 中间件在 React 19 下的使用问题解析

问题背景

在使用 AlovaJS 3.2.10 版本与 React 19 结合开发时，开发者遇到了一个关于 actionDelegationMiddleware 中间件的使用问题。当尝试在 useRequest 中使用该中间件时，控制台会抛出错误："Should have a queue. You are likely calling Hooks conditionally, which is not allowed"。

问题现象

开发者在使用如下代码时遇到了上述错误：

const { send } = useRequest(
    (params) => {
        return alova.Get<ApiResponse<T[]>>("/api/list", { params })
    },
    {
        immediate: false,
        middleware: actionDelegationMiddleware(`list`),
    },
)

问题分析

经过深入排查，发现这个问题实际上与 React 19 的新特性 React Compiler 有关。React Compiler 是 React 19 引入的一个新工具，旨在优化 React 应用的性能。然而，在某些情况下，它可能会与现有的 Hook 使用模式产生冲突。

解决方案

对于遇到相同问题的开发者，可以采取以下解决方案之一：

1. 临时解决方案：移除 React Compiler 的配置，这可以让应用恢复正常运行。

2. 长期解决方案：等待 AlovaJS 官方发布针对 React 19 的兼容性更新。根据项目维护者的反馈，相关问题已经在内部修复（fixed in #677）。

相关 API 文档问题

在排查过程中还发现了一个文档与实现不一致的问题：

• 文档中描述 accessAction 函数支持第三个参数用于静默访问 actions
• 但实际代码实现中，该函数只接受两个参数：

  export declare function accessAction(
    id: string | number | symbol | RegExp,
    onMatch: (matchedSubscriber: Record<string, any>, index: number) => void
  ): void;
  

这个问题已经被项目维护者确认，并将在后续版本中修复。

总结

当在 React 19 环境中使用 AlovaJS 的 actionDelegationMiddleware 中间件时，如果遇到 Hook 调用相关的错误，开发者可以考虑：

1. 检查是否使用了 React Compiler，暂时禁用它以确认问题
2. 关注 AlovaJS 的版本更新，及时升级到修复了兼容性问题的版本
3. 注意 API 文档与实际实现的差异，遇到问题时可以查阅源码确认

这类框架间的兼容性问题在技术栈升级过程中较为常见，保持对各个依赖库版本变更的关注，能够帮助开发者更高效地解决问题。