从React转Next.js：TRPC Query调用的正确模式？

正确实现方式 #

你完全猜中了问题所在——React Hook不能嵌套在另一个Hook（比如useEffect）或条件代码块中调用，tRPC的useQuery本身就是一个Hook，必须遵守这个规则。正确的写法是直接在组件顶层调用它，通过enabled选项控制查询是否执行：

import { trpc } from '@/utils/trpc'; // 按你的项目实际路径调整
import { useState } from 'react';

// 组件内部逻辑
const [activeChildId, setActiveChildId] = useState<string | undefined>(undefined);

// 直接在组件顶层调用useQuery，用enabled控制查询触发时机
const { data: weight, isLoading, isError } = trpc.children.getWeight.useQuery(
  { childId: activeChildId },
  {
    // 只有当activeChildId存在时，才执行查询
    enabled: !!activeChildId,
    // 可选：设置初始默认数据
    initialData: [],
  }
);

为什么这个写法可行？ #

• enabled是tRPC（基于React Query）的核心控制选项，会自动监听依赖变化：当activeChildId从无到有时自动触发查询，activeChildId变更时自动重新查询对应数据。
• 无需手动维护weight状态，useQuery返回的data就是实时的查询结果，直接在UI中使用即可。
• 同时可直接获取isLoading、isError等状态，方便快速实现加载提示、错误处理等交互逻辑。

进阶：数据处理场景 #

如果需要对返回的原始数据做格式化或转换，用useMemo处理即可：

import { useMemo } from 'react';

// 基于上面的查询结果处理数据
const formattedWeight = useMemo(() => {
  return weight?.map(item => ({
    ...item,
    // 示例：格式化日期为本地格式
    displayDate: new Date(item.date).toLocaleDateString(),
  })) || [];
}, [weight]);

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