React函数组件中tRPC无效钩子调用问题求解

你遇到的错误是因为React钩子必须在组件顶层作用域调用，不能嵌套在普通回调函数（比如onSuccess的处理函数）里——React依赖钩子的调用顺序来管理组件状态和副作用，打破这个规则会导致运行时错误。

正确的实现方式 #

把tRPC的useMutation钩子移到组件顶层初始化，然后在回调里调用钩子返回的mutate方法执行创建用户逻辑：

// 组件顶层：提前初始化所需钩子和状态
const account = useAccount();
const [showSuccessToast, setShowSuccessToast] = useState(false);

// 初始化创建用户的mutation，可在这里定义成功/失败回调
const createUserMutation = trpc.user.createUser.useMutation({
  onSuccess: (data) => {
    console.log(data);
    setShowSuccessToast(true);
  },
  onError: (err) => {
    console.error("创建用户失败:", err);
    // 可添加错误提示逻辑
  }
});

const { connectAsync } = useConnect({
  connector: new InjectedConnector(),
  onSuccess: handleSuccessfulConnection,
  onError: handleConnectionError,
});

// 连接成功后的回调：调用mutation的mutate方法触发请求
const handleSuccessfulConnection = (): void => {
  // 先检查地址是否存在，避免空值传递
  if (!account.address) return;
  createUserMutation.mutate(account.address);
};

关键说明 #

• useMutation是React钩子，必须在组件的顶层（函数最外层）调用，不能放在handleSuccessfulConnection这类普通函数里。
• mutate是useMutation返回的执行方法，它不属于钩子，可以在任何回调、事件处理函数里调用，用来触发实际的API请求。

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