在React应用中使用MetaMask的web3时遇未定义错误求助

这种情况我碰过好多次，核心原因就是MetaMask注入web3的时机晚于React组件的初始渲染时机：虽然你在控制台最终能看到web3已被定义，但组件执行if(typeof web3 !== 'undefined')这段代码时，MetaMask还没完成对window.web3的注入，自然会报错。

下面给你几个靠谱的解决方案，按推荐优先级排序：

方案1：使用MetaMask官方推荐的EIP-1193 API（最稳定） #

MetaMask现在已经不再推荐直接用旧的window.web3注入方式，转而使用标准化的window.ethereum接口，兼容性和可靠性更强。你可以在React组件里这样写：

import { useEffect, useState } from 'react';
import Web3 from 'web3';

function WalletConnector() {
  const [account, setAccount] = useState('');
  const [web3, setWeb3] = useState(null);

  useEffect(() => {
    const initWeb3 = async () => {
      // 检查是否安装了MetaMask
      if (!window.ethereum) {
        alert('请先安装MetaMask钱包插件');
        return;
      }

      try {
        // 请求用户授权连接钱包
        await window.ethereum.request({ method: 'eth_requestAccounts' });
        // 初始化web3实例
        const web3Instance = new Web3(window.ethereum);
        // 获取当前账户
        const [currentAccount] = await web3Instance.eth.getAccounts();
        
        setWeb3(web3Instance);
        setAccount(currentAccount);
      } catch (err) {
        console.error('连接钱包失败:', err);
      }
    };

    initWeb3();
  }, []);

  if (!web3) {
    return <div>正在加载钱包连接...</div>;
  }

  return (
    <div>
      <p>当前连接账户: {account}</p>
      {/* 这里可以添加你的web3业务逻辑 */}
    </div>
  );
}

export default WalletConnector;

方案2：监听MetaMask的注入事件（兼容旧版逻辑） #

如果你非要沿用旧的window.web3判断逻辑，可以通过监听MetaMask的注入事件，确保web3准备好后再执行代码：

import { useEffect, useState } from 'react';
import Web3 from 'web3';

function OldWeb3Component() {
  const [web3, setWeb3] = useState(null);

  useEffect(() => {
    const handleWeb3Ready = () => {
      const web3Instance = new Web3(window.web3.currentProvider);
      setWeb3(web3Instance);
      console.log('Web3已初始化');
    };

    // 先检查是否已经注入web3
    if (typeof window.web3 !== 'undefined') {
      handleWeb3Ready();
    } else {
      // 监听MetaMask的初始化事件，确保只触发一次
      window.addEventListener('ethereum#initialized', handleWeb3Ready, { once: true });
    }

    // 组件卸载时清理事件监听
    return () => {
      window.removeEventListener('ethereum#initialized', handleWeb3Ready);
    };
  }, []);

  return <div>{web3 ? 'Web3加载完成' : '等待Web3注入...'}</div>;
}

export default OldWeb3Component;

为什么会出现"控制台显示web3存在但代码报错"的矛盾？ #

Chrome控制台的window对象是实时更新的，当你手动查看时，MetaMask已经完成了web3的注入；但React组件的代码是在页面加载早期执行的，此时window.web3还未被注入，所以判断时会得到undefined。你可以在组件的判断代码里加一句console.log('组件执行时的web3:', window.web3)，就能看到它确实是undefined了。

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