react 函数组件中的 tRPC 无效钩子调用答案

【问题标题】：tRPC invalid hook call in react function componentreact 函数组件中的 tRPC 无效钩子调用
【发布时间】：2023-02-11 21:27:51
【问题描述】：

当用户使用他们的钱包连接到该站点时，我正在尝试创建一个新用户。

当用户点击连接按钮时，useAccount钩子会返回一个字符串类型的地址。

然后我想使用 tRPC 在我的数据库中使用这个地址创建一个新用户。

目前，我收到无效挂钩调用错误。

当用户单击按钮时，将调用 authHandler 方法，然后调用此挂钩：

//hook to get account info
const account = useAccount();

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

然后 onSuccess 回调执行这个：

const handleSuccessfulConnection = (): void => {
    const { data } = trpc.user.createUser.useMutation(account.address);
    //runtime error here about invalid hook call
    console.log(data);
    setShowSuccessToast(true);
  };

我有什么办法可以解决这个问题吗？

【问题讨论】：

您不能在函数内部调用 useMutation 之类的挂钩，这就是问题所在。我不能告诉你如何解决，因为我不知道那个钩子做了什么，也不知道handleSuccessfulConnection 试图做什么。

标签： javascript reactjs typescript trpc.io

【解决方案1】：

useMutation 是一个钩子，所以你不能有条件地调用它。创建突变后，您可以使用它的mutate 来触发它。

function MyComponent() {
  const myMutation = trpc.router.query.useMutation();
  
  function handleClick() {
    myMutation.mutate(inputArgs);
  }

  return (
    <button onClick={handleClick}>Click me</button>
  )
}

【讨论】：