{"content":{"title":"React的Web3modal/wagmi之Hooks使用（四）","body":"#### 1、[useContractRead](https://wagmi.sh/react/hooks/useContractRead)\r\nuseContractRead主要就是用来调用合约的读取方法的，比如solidity里面带有view和pure的方法，是不需要gas费的。\r\n参数address是合约地址，在区块浏览器可以查询到\r\n参数abi就是合约的ABI，在区块浏览器可以查询到\r\nchainId就是要查询的链，不填的话默认是当前链，\r\nfunctionName是方法名称，可以看一下ABI上有哪些方法，\r\nargs就是方法所需的参数，参数一定要和方法对应，否则会报错的哈。\r\n```\r\nimport {useContractRead, erc20ABI,erc721ABI,erc4626ABI, } from 'wagmi'\r\nimport bigTimeABI from '../../assets/abi/bigTimeABI.json'\r\n\r\nconst index: React.FC = () => {\r\n    const abi = JSON.parse(bigTimeABI.result) \r\n    //const abi = erc20ABI\r\n    const result = useContractRead({\r\n        address: '0x64Bc2cA1Be492bE7185FAA2c8835d9b824c8a194',\r\n        abi,\r\n        chainId就是要查询的链，不填的话默认是当前链，\r\n        : 1,\r\n        functionName: 'balanceOf',\r\n        args: ['0x0dxxxxxxxxxxxxxxxxxxxxxxxxxxxx'],\r\n    })\r\n    return ( );\r\n};\r\n\r\n```\r\n返回结果如下：\r\n![image.png](https://img.learnblockchain.cn/attachments/2023/11/dJfOjKgp655ab8336896f.png)\r\n\r\n#### 2、[useContractReads](https://wagmi.sh/react/hooks/useContractReads)\r\n\r\n可以同时调用多个合约读取方法。\r\n\r\n```\r\n   const result = useContractReads({\r\n        contracts: [\r\n            {\r\n                address: '0x64Bc2cA1Be492bE7185FAA2c8835d9b824c8a194',\r\n                abi,\r\n                chainId: 1,\r\n                functionName: 'balanceOf',\r\n                args: ['0x0dxxxxxxxxxxxxxxxxxxxxxxxxxxxx'],\r\n            },\r\n            {\r\n                address: '0x64Bc2cA1Be492bE7185FAA2c8835d9b824c8a194',\r\n                abi,\r\n                chainId: 1,\r\n                functionName: 'balanceOf',\r\n                args: ['0x0dyyyyyyyyyyyyyyyyyyyyyyyyyy'],\r\n            }\r\n        ]\r\n    })\r\n```\r\n返回结果如下：\r\n![image.png](https://img.learnblockchain.cn/attachments/2023/11/hRVlEjF9655abe24b5186.png)\r\n\r\n#### 3、[useContractInfiniteReads](https://wagmi.sh/react/hooks/useContractInfiniteReads)\r\nuseContractInfiniteReads主要是用来读取合约带有分页返回值的方法，\r\n比如有1000条数据，但是默认只返回100条，有10页，这种方法就适合用这个hook，\r\n我这里暂时没有这种例子，所以就不实验了。\r\n\r\n#### 4、[useContractWrite](https://wagmi.sh/react/hooks/useContractWrite)\r\nuseContractWrite调用合约的可写方法，调用的话数据会上链，是需要gas费的。\r\nuseContractWrite会返回write方法，调用write方法才会写入。\r\n![image.png](https://img.learnblockchain.cn/attachments/2023/11/A7T9Ubd7655ac4e6d6ac6.png)\r\n\r\n```\r\nimport { Layout, Button, Row } from 'antd';\r\nimport React from 'react';\r\nimport {useAccount, useContractWrite, useContractRead, erc20ABI,erc721ABI,erc4626ABI, Address, } from 'wagmi'\r\n\r\nconst index: React.FC = () => {\r\n    const accountInfo = useAccount();\r\n    let fromAddress:Address = accountInfo?.address as Address;\r\n    let toAddress:Address = '0xyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy'\r\n    let contractAddress:Address = '0x47cE7E72334Fe164954D4f9dd95f3D20A26e8e2b'\r\n    const abi = erc20ABI\r\n    \r\n    function balanceOf(address:Address){\r\n        const balance = useContractRead({\r\n            address: contractAddress,\r\n            abi,\r\n            chainId: 80001,  //polygon mumbai测试网\r\n            functionName: 'balanceOf',\r\n            args: [address],\r\n            onSuccess(data) {\r\n                console.log(address, data)\r\n            },\r\n        })\r\n    }\r\n    balanceOf(fromAddress)\r\n    balanceOf(toAddress)\r\n\r\n    const {write} = useContractWrite({\r\n        address: contractAddress,\r\n        abi,\r\n        chainId: 80001,\r\n        functionName: 'transfer',\r\n        args: [toAddress, BigInt(0.1 * 10**18)],\r\n        onSuccess(data) {\r\n            console.log('转成成功', data)\r\n        },\r\n    })\r\n    return (\r\n        <Layout>\r\n            <Row>\r\n                <w3m-button />\r\n            </Row>\r\n            <Row>\r\n            <Button disabled={!write} onClick={() => write?.()}>转账</Button>\r\n            </Row>\r\n           \r\n        </Layout>\r\n    );\r\n};\r\n\r\nexport default index;\r\n```\r\n\r\n调用write方法以后，会消耗gas：\r\n\r\n![image.png](https://img.learnblockchain.cn/attachments/2023/11/pj1spxCx655ac71542ec8.png)\r\n\r\n方法调用成功以后，会调用传参的onSuccess方法\r\n![image.png](https://img.learnblockchain.cn/attachments/2023/11/tbtfNLHP655acbf43b81b.png)\r\n\r\n#### 5、[useContractEvent](https://wagmi.sh/react/hooks/useContractEvent)\r\nuseContractEvent是监听某个合约的某个事件\r\n```\r\nuseContractEvent({\r\n        chainId: 1,   //链ID\r\n        address: '0x64Bc2cA1Be492bE7185FAA2c8835d9b824c8a194',  //合约地址\r\n        abi: erc20ABI,   //合约ABI\r\n        eventName: 'Transfer',   //事件名称\r\n        listener(log) {        //监听回调，监听事件以后，会调用这个方法\r\n          console.log(log)\r\n        },\r\n    })\r\n```\r\nlistener返回值如下：\r\n\r\n![image.png](https://img.learnblockchain.cn/attachments/2023/11/E8dWOSz2655ad3090c00b.png)"},"author":{"user":"https://learnblockchain.cn/people/15134","address":null},"history":null,"timestamp":1700451138,"version":1}