React Query Hook 初始加载时未执行问题排查

你的useGetNotesQuery初始加载不执行，核心问题有两个：

• 查询函数依赖projectItemId，但初始渲染时该参数可能未就绪，导致查询逻辑被跳过
• 固定的query key无法触发参数变化后的自动查询，同时缺少明确的查询启用控制

修复步骤 #

1. 优化自定义Hook逻辑 #

修改useGetNotesQuery，添加enabled选项控制查询时机，并将参数纳入query key：

import { getNotesById } from './../../queries/notes/get-notes';
import { useQuery } from 'react-query';

function useGetNotesQuery({ projectItemId, itemId, itemType }: any) {
  // 仅当projectItemId存在时启用查询
  const enabled = !!projectItemId;

  return useQuery(
    // 将所有依赖参数加入query key，确保参数变化时自动重新查询
    ['notes', projectItemId, itemId, itemType],
    async () => {
      const result = await getNotesById({ projectItemId, itemId, itemType });
      return result.data;
    },
    {
      enabled, // 明确控制查询是否触发
      retry: 3
    }
  );
}

export default useGetNotesQuery;

2. 调整组件加载状态处理 #

原组件中!isLoading会导致初始查询未启用时直接隐藏内容，建议改为根据状态展示对应UI：

// 替换原return中的条件渲染部分
return (
  <section aria-labelledby="notes-title">
    {isLoading ? (
      <div className="px-4 py-6 sm:px-6">
        <div className="animate-pulse">加载笔记中...</div>
      </div>
    ) : (
      <div className="sm:overflow-hidden sm:rounded-lg">
        {console.log(notes)}
        <div className="divide-y divide-gray-200">
          {/* 原组件其余内容保留 */}
          <div className="px-4 py-5 sm:px-6">
            <h2 id="notes-title" className="text-lg font-medium text-gray-900">
              Notes
            </h2>
          </div>
          {/* ... 其余代码不变 */}
        </div>
      </div>
    )}
  </section>
);

3. 验证参数初始化时机 #

检查Notes组件的props（projectItemId、itemId、itemType）是否在初始渲染时就有有效值。如果这些参数是异步获取的（比如从context或路由异步加载），需确保参数就绪后再渲染Notes组件，或者在组件内处理参数未就绪的状态。

问题根源说明 #

• 原Hook中，当projectItemId不存在时，查询函数返回undefined，React Query会将该查询标记为“跳过”，不触发请求
• 固定的query key'notes'无法识别参数变化，即使后续参数就绪，也不会自动重新触发查询
• 添加enabled选项后，React Query会在参数就绪时自动启动查询，包含参数的query key能确保参数变化时重新获取数据

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