Wagmi usePrepareContractWrite不是一个函数

Question

当时我正在为RainbowKit和Wagmi学习youtube教程，然后我偶然发现了这个问题。

“未处理的运行时错误TypeError：(0，TypeError不是一个函数”

这是我的代码：

import Image from "next/image";
import React from "react";

import { usePrepareContractWrite, useContractWrite, useWaitForTransaction, useContractRead, erc721ABI } from 'wagmi';
import Abi from "../../contract-abi";



const Connected = () => {

    const [totalMinted, setTotalMinted] = React.useState(0);
    
    const { config, error } = usePrepareContractWrite({
        addressOrName: '...', //contract wallet
        abi: erc721ABI, //import abi
        functionName: "mint",
    });



    const {
        data: minData,
        write: mint, 
        isLoading: isMintLoading,
        isSuccess: isMintStarted
    } = useContractWrite(config);

    const { isSuccess: txSuccess } = useWaitForTransaction({
        hash: minData?.hash
    });

    const { data: totalSupplyData } =useContractRead({
        ...config,
        functionName: "totalSupply",
        watch: true
    });

    React.useEffect(() =>{
        if (totalSupplyData) {
            setTotalMinted(totalSupplyData.toNumber90)
        }
    }, [totalSupplyData])

    const isMinted = txSuccess;
    
  return (
    <div className="w-screen h-[95vh] p-0 m-0 bg-mint-white ">
      <div className="relative w-full h-full pt-32">
        <div className="w-full text-center">
          <h1 className="font-brightness text-stoic-blue">pick a card</h1>
          <h3 className='font-brightness text-salmon-pink'>select your favorite card to mint.</h3>
        </div>
        <div className="w-full text-center">

        </div>
        <div className="w-full h-auto flex justify-center">
            <button 
            onClick={() => mint?.()}
            disabled={isMintLoading || isMintStarted}
            data-mint-loading={isMintLoading}
            data-mint-started={isMintStarted}
            >
            {isMintLoading && 'Waiting for approval'}
            {isMintStarted && 'Minting...'}
            {!isMintLoading && !isMintStarted && 'Mint'}
            </button>
            {error && (
                <div>An error occurred preparing the transaction: {error.message}</div>
            )}
        </div>
        <div className="w-full text-center">
            <p>{totalMinted} minted</p>
        </div>
      </div>
    </div>
  );

}


export default Connected;

有人能帮忙吗？

Answer 1

我已经纠正了这个问题。

经过深入研究，我发现我使用的是一个旧版本的Wagmi，它没有usePrepareCreateWrite函数。

我做了一个npm i wagmi@latest更新，它现在正在工作。