如何用useDapp替代useEffect调用合约函数？求实现示例

核心实现思路 #

useDapp提供的useContract hook可以简化合约实例的创建流程，无需手动初始化Web3实例。对于只读合约方法（view/pure），你可以直接在useEffect中调用合约实例的对应方法，逻辑和原Web3写法一致，但代码更简洁。

完整示例代码 #

import { useContract } from '@usedapp/core';
import { ContractABI, ContractAddress } from './your-contract-config'; // 替换为你的合约ABI和地址
import { isAddress } from './your-utils'; // 替换为你的地址校验工具

const YourComponent = (props) => {
  // 通过useContract创建合约实例
  const contract = useContract(ContractAddress, ContractABI);

  // 封装合约调用逻辑
  const fetchData = async (address) => {
    if (!contract) return; // 合约实例未初始化时直接返回
    try {
      const response = await contract.getDataByUserAddress(address);
      // 这里可以将结果存入state或做其他处理
      console.log('获取到的数据:', response);
    } catch (error) {
      console.error('合约方法调用失败:', error);
    }
  };

  // 在useEffect中触发调用
  useEffect(() => {
    const targetAddress = props.match.params.address;
    if (isAddress(targetAddress)) {
      fetchData(targetAddress);
    }
  }, [props.match.params.address, contract]); // 依赖项加入contract，确保实例就绪后再执行

  return <div>你的组件内容</div>;
};

export default YourComponent;

关键说明 #

• useContract会自动关联当前钱包的Web3实例，无需手动创建new web3.eth.Contract，还能自动处理链切换等场景下的实例更新。
• 依赖项中加入contract是为了避免在合约实例未初始化完成时调用方法，引发错误。
• 只读方法的调用无需签名或授权，直接用await执行即可，和Web3的调用逻辑完全对齐。

内容的提问来源于stack exchange，提问作者Руслан Миров