React函数组件中的tRPC无效钩子调用

Question

当用户用钱包连接到该网站时，我试图创建一个新用户。

当用户点击按钮进行连接时，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);
  };

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

Answer 1

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

function MyComponent(props: {foo: boolean}) {
  const myMutation = trpc.router.query.useMutation();

  if (!props.foo) return null; // can't call hooks after this
  
  function handleClick() {
    myMutation.mutate(inputArgs);
  }

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