React连接MetaMask：关闭授权弹窗后再次点击无法唤起弹窗

问题现象 #

• 应用通过按钮点击触发React与MetaMask钱包的连接逻辑
• 点击连接按钮时，应用会首先检测MetaMask是否已安装，若检测到已安装则唤起MetaMask登录授权弹窗
• 若用户未完成登录操作就关闭/离开MetaMask弹窗，再次点击「连接钱包」按钮时，MetaMask授权弹窗不会重新出现
• 问题复现参考：问题复现视频

现有实现代码 #

组件核心逻辑 #

const WalletCard = () => {
const [errorMessage, setErrorMessage] = useState(null);
const [defaultAccount, setDefaultAccount] = useState(null);
const [userBalance, setUserBalance] = useState(null);
const [networkName, setNetworkName] = useState("");

const connectWalletHandler = () => {
    if (window.ethereum) {
      window.ethereum
        .request({ method: "eth_requestAccounts" })
        .then((result) => {
          accountChangedHandler(result[0]);
        });
    } else {
      setErrorMessage("Install MetaMask");
      alert(errorMessage);
    }
    window.ethereum.request({ method: "net_version" }).then((chainID) => {
      chainID === "1"
        ? setNetworkName("Ethereum Main Network")
        : chainID === "3"
        ? setNetworkName("Ropsten Test Network")
        : chainID === "4"
        ? setNetworkName("Rinkeby Test Network")
        : chainID === "5"
        ? setNetworkName("Goerli Test Network")
        : chainID === "42"
        ? setNetworkName("Kovan Test Network")
        : setNetworkName("Network not found");
    });
  };

  //  钱包账户变更处理
  const accountChangedHandler = (newAccount) => {
    setDefaultAccount(newAccount);
    getAccountBalance(newAccount.toString());
  };

  // 获取账户余额
  const getAccountBalance = (account) => {
    window.ethereum
      .request({ method: "eth_getBalance", params: [account, "latest"] })
      .then((balance) => {
        setUserBalance(ethers.utils.formatEther(balance));
      })
      .catch((error) => {
        setErrorMessage(error.message);
      });
  };

  const disconnectWallet = () => {
    window.location.reload();
  };

  const chainChangedHandler = () => {
    window.location.reload();
  };

  // 监听账户变更/断开事件
  window.ethereum.on("accountsChanged", chainChangedHandler);

  // 监听链变更事件
  window.ethereum.on("chainChanged", chainChangedHandler);

页面渲染逻辑 #

return (
    <div className="master-container">
      <div className="card-container">
        <div className="image-container">
          <img
            className="img"
            src={
              networkName === "Ethereum Main Network" && defaultAccount
                ? ethLogo
                : networkName === "Ropsten Test Network" && defaultAccount
                ? rIcon
                : networkName === "Rinkeby Test Network" && defaultAccount
                ? rink
                : networkName === "Goerli Test Network" && defaultAccount
                ? goerli
                : networkName === "Kovan Test Network" && defaultAccount
                ? kovan
                : mmLogo
            }
            height={100}
            width={100}
          ></img>
        </div><div className="card-text-container">
          <h1 className="card-title">
            {" "}
            {defaultAccount ? `${networkName}` : "MetaMask Wallet Connector"}
          </h1>

          <h2 className="card-text-balance">
            {userBalance ? `Balance: ${userBalance} ETH` : ""}
          </h2>

          <h4 className="card-text-address">
            {defaultAccount ? `Address: ${defaultAccount}` : ""}
          </h4>

          <p className="card-subtext">
            {defaultAccount
              ? `You are connected to the ${networkName}`
              : "Connect to view account details"}{" "}
          </p>

          <div className="btn-container">
            {defaultAccount ? (
              ""
            ) : (
              <button className="btn-connect" onClick={connectWalletHandler}>
                Connect Wallet
              </button>
            )}

            {defaultAccount ? (
              <button className="btn-disconnect" onClick={disconnectWallet}>
                Disconnect Wallet
              </button>
            ) : (
              ""
            )}
          </div>
        </div>
      </div>
    </div>);
    };
    export default WalletCard;

问题原因 #

首次点击按钮时会正常调用connectWalletHandler方法，第二次点击按钮时控制台提示eth_requestAccounts方法已发起过调用，这是MetaMask的官方接口限制：同一请求未完成用户操作时，不会重复弹出授权弹窗，避免恶意站点频繁骚扰用户。
现有代码没有捕获用户拒绝/关闭弹窗的场景，也没有对应的状态提示用户手动打开浏览器扩展完成授权。另外原有代码直接在组件函数体中绑定window.ethereum事件，每次组件重渲染都会重复绑定监听，容易引发内存泄漏和逻辑异常。

修复方案 #

1. 新增连接状态标记，捕获请求异常 #

首先新增isConnecting状态标记连接流程，同时给eth_requestAccounts添加catch逻辑，捕获用户关闭弹窗、拒绝授权的场景，把事件监听移到useEffect中避免重复绑定：

// 新增连接中状态
const [isConnecting, setIsConnecting] = useState(false);

const connectWalletHandler = () => {
  if (!window.ethereum) {
    setErrorMessage("请先安装MetaMask扩展");
    return;
  }
  // 已经在连接流程中时，不再重复发起请求
  if (isConnecting) return;

  setIsConnecting(true);
  setErrorMessage(null);

  window.ethereum
    .request({ method: "eth_requestAccounts" })
    .then((result) => {
      accountChangedHandler(result[0]);
      setIsConnecting(false);
    })
    .catch((err) => {
      setIsConnecting(false);
      // 4001为用户拒绝/关闭授权弹窗的错误码
      if (err.code === 4001) {
        setErrorMessage("授权未完成，请点击浏览器右上角MetaMask图标手动完成连接");
      } else {
        setErrorMessage(err.message);
      }
    });

  // 网络请求逻辑加非空判断避免报错
  window.ethereum?.request({ method: "net_version" }).then((chainID) => {
    chainID === "1"
      ? setNetworkName("以太坊主网")
      : chainID === "3"
      ? setNetworkName("Ropsten测试网")
      : chainID === "4"
      ? setNetworkName("Rinkeby测试网")
      : chainID === "5"
      ? setNetworkName("Goerli测试网")
      : chainID === "42"
      ? setNetworkName("Kovan测试网")
      : setNetworkName("未识别网络");
  });
};

// 事件监听移到useEffect中，组件卸载时移除监听
useEffect(() => {
  if (!window.ethereum) return;
  window.ethereum.on("accountsChanged", chainChangedHandler);
  window.ethereum.on("chainChanged", chainChangedHandler);
  return () => {
    window.ethereum.removeListener("accountsChanged", chainChangedHandler);
    window.ethereum.removeListener("chainChanged", chainChangedHandler);
  }
}, [])

2. 修改渲染逻辑，增加对应状态提示 #

在卡片文本区域增加连接中、错误提示的展示，同时给按钮增加禁用状态：

<div className="card-text-container">
  <h1 className="card-title">
    {defaultAccount ? `${networkName}` : "MetaMask钱包连接工具"}
  </h1>

  <h2 className="card-text-balance">
    {userBalance ? `余额: ${userBalance} ETH` : ""}
  </h2>

  <h4 className="card-text-address">
    {defaultAccount ? `钱包地址: ${defaultAccount}` : ""}
  </h4>

  {/* 错误提示 */}
  {errorMessage && <p className="card-error-text" style={{color: "#ef4444"}}>{errorMessage}</p>}

  <p className="card-subtext">
    {defaultAccount
      ? `当前已连接到${networkName}`
      : isConnecting 
        ? "连接中，请在弹出的MetaMask窗口中完成授权"
        : "点击按钮连接钱包查看账户信息"}{" "}
  </p>

  <div className="btn-container">
    {!defaultAccount && (
      <button 
        className="btn-connect" 
        onClick={connectWalletHandler}
        disabled={isConnecting}
      >
        {isConnecting ? "连接中..." : "连接钱包"}
      </button>
    )}

    {defaultAccount && (
      <button className="btn-disconnect" onClick={disconnectWallet}>
        断开连接
      </button>
    )}
  </div>
</div>

修复后逻辑：

• 用户首次点击按钮正常唤起弹窗
• 如果用户关闭弹窗，页面会显示明确提示，告知用户点击浏览器右上角的MetaMask图标手动完成授权，不会重复发起无效请求
• 连接过程中按钮禁用，避免重复点击
• 所有异常场景都有对应提示，事件监听不会重复绑定

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