React+Web3开发报错Unhandled Rejection: info.contract.methods未定义

报错根因 #

你遇到的info.contract.methods is undefined错误由两个核心问题导致：

1. 合约实例化语法错误
2. 异步初始化逻辑未做前置校验，调用getDrops时合约还未完成初始化

修复步骤 #

1. 修正合约实例化语法

Web3.js中实例化合约的正确API是web3.eth.Contract，你代码中误写为web3.ethereum.Contract，导致合约实例没有正确生成，直接赋值为undefined。
找到init方法中合约实例化代码，修改为：

contract: new web3.eth.Contract(contract.abi, contract.address),

2. 调用getDrops前增加合约存在性校验

由于init是异步执行方法，点击按钮调用getDrops时有可能还没完成钱包连接、合约初始化的流程，此时info.contract还是初始值null，直接调用methods就会报错。
修改getDrops方法，开头增加校验逻辑：

const getDrops = async() => {
  // 增加前置校验
  if(!info.contract) {
    alert(info.status || "请先完成MetaMask连接并切换到以太坊测试网")
    return
  }
  setDrops(prevState => ({
    ...prevState,
    loading: true,
  }));
  // 后续原有逻辑不变
  info.contract.methods
  .getDrops()
  .call()
  .then((result) => {
    console.log(result);
    setDrops({
        loading: false,
        list: result,
    });
  })
  .catch((err) => {
    console.log(err);
    setDrops(intialDropState);
  });
};

3. 可选优化：按钮状态联动

可以把按钮的可用状态和info.connected绑定，避免用户在未连接钱包时点击触发报错：

<button onClick={() => getDrops()} disabled={!info.connected}>
  {info.connected ? "获取Drops" : "请先连接钱包"}
</button> 

内容的提问来源于stack exchange，提问作者Sira Toure