javascript - 钩子(Hook)没有在handleSubmit中被调用

Question

我有一个我想在handleSubmit 中调用的钩子(Hook)。来自这个钩子(Hook)的数据将被传递到另一个钩子(Hook)，并根据第二个钩子(Hook)的响应，我想推送不同的页面。

第一个钩子(Hook):

const write = useContractWrite(
      {
        addressOrName: Address,
        contractInterface: Interface,
      },
      'entry',
      { 
        args: [firstAnswer.trim().toLowerCase(), secondAnswer.trim().toLowerCase()],
        overrides: { 
          value: ethers.utils.parseEther("0.01") 
       }
      }
    )

Documentation for useContractWrite

我有另一个依赖于 useContractWrite 钩子(Hook)数据的钩子(Hook):

const waitForTransaction = useWaitForTransaction({
      wait: write!.data?.wait,
      onSettled(data, error) {
        console.log("Settled", { data })
      }
    });

Docs for useWaitForTransaction

最后，我的handleSubmit:

async function handleSubmit() {
      if (firstAnswer.length == 0 || secondAnswer.length == 0) {
        setInputError(true);
      }
      else {
        setInputError(false);

        //write
        const txn = write;
        // console.log(write + "writeData")

        //wait            
        // console.log(waitForTransaction.data + "waitData")
      }
    }

• 不幸的是，write函数没有在handleSubmit 中被调用。所以，我让它可调用

• 将写入更改为以下内容:const { write } = useContractWrite使其可调用 const txn = write();

• 但是，我无法通过 txn!.data.wait像这样使用WaitForTransaction:

   const txn = write();
  
   //wait
   waitForTransaction({wait: txn!.data?.wait});```
  
  

• 尝试通过 txn.data.wait 时出现的错误至waitForTransaction是 waitForTransaction 不可调用 This expression is not callable.

• 所以，我将其设置为可调用:const { waitForTransaction } = useWaitForTransaction({...})

• 现在，我在 useWaitForTransaction Hook 上收到以下错误:Property 'waitForTransaction' does not exist on type 'Pick<QueryObserverResult<TransactionReceipt, Error>, "data" | "error" | "isError" | "isLoading" | "isSuccess" | "isFetched" | "isFetching" | "isRefetching" | "refetch" | "fetchStatus"> & { ...; }'

我确信有一个简单的解决方案，但我不知道问题出在哪里。我已经按照文档进行了操作，但它不起作用。

Answer 1

根据文档，waitForTransaction 是整个返回值，而不是返回值的属性，因此您需要删除花括号。

const waitForTransaction = useWaitForTransaction({...})

您将遇到的另一个问题是钩子(Hook)不能有条件地调用，因此在钩子(Hook)领域这样做是非法的

else {
  ...
  // cannot do this inside if () {} else {}
  const waitForTransaction = useWaitForTransaction({...})
}

---

查看 wagmi 示例，我会像这样添加 handleSubmit

import { useContractWrite, useWaitForTransaction } from 'wagmi'

function App() {

  const [inputError, setInputError] = useState(false)

  const contractWrite = useContractWrite(
    {
      addressOrName: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
      contractInterface: wagmigotchiABI,
    },
    'feed',
  )

  const handleSubmit = () => {
    const hasError = firstAnswer.length == 0 || secondAnswer.length == 0;
    setInputError(hasError)
    if (!hasError) {
      contractWrite.write()       // call write method of contract
    }
  }

  // use with conditional inside hook call
  const waitForTransaction = useWaitForTransaction({
    wait: contractWrite.data?.wait 
  })
}