如何在React/Next.js项目中实现Metamask连接并修复点击无响应问题

1 核心Bug：点击事件未执行的根因 #

你在ConnectWallet.jsx中给按钮绑定的onClick逻辑有语法错误，仅引用了ConnectMetamask函数但没有调用，所以点击后不会触发任何逻辑：

// 错误写法 仅引用函数未执行
<button onClick={() => { ConnectMetamask }}>wallet</button>

修复为以下任意一种写法即可：

// 写法1 直接传入函数引用
<button onClick={ConnectMetamask}>wallet</button>
// 写法2 包装在箭头函数中主动调用
<button onClick={() => ConnectMetamask()}>wallet</button>

2 其他需要修复的逻辑问题 #

2.1 state类型不统一 #

你给Accounts的初始值是字符串"connect"，但连接成功后存的是对象{accounts: 地址数组}，后续渲染地址时会出现格式错误，建议统一存储结构：

// 初始值设为空数组更合理
const [accounts, setAccounts] = useState([]);
// 连接成功后直接存地址数组
setAccounts(newAccounts)

2.2 封装的ConnectMetamaskButton组件未使用 #

你单独封装了按钮组件，但没有在ConnectWallet.jsx中引入调用，直接写了原生button，按你的需求调整后代码如下：

2.3 兼容未安装MetaMask的场景 #

最好提前判断window.ethereum是否存在，避免用户未安装插件时报错。

修复后的完整代码 #

ConnectWallet.jsx #

import { useState } from "react";
import { ethers } from 'ethers';
import ConnectMetamaskButton from './ConnectMetamaskButton'; // 引入你封装的按钮组件

export default function ConnectWallet(props) {
    const [accounts, setAccounts] = useState([]);
    console.log("当前账户：", accounts);

    async function connectMetamask() {
        // 先判断是否安装MetaMask
        if (!window.ethereum) {
            alert("请先安装MetaMask插件");
            return;
        }
        try {
            const newAccounts = await window.ethereum.request({
                method: 'eth_requestAccounts',
            })
            setAccounts(newAccounts)
            // 注意setState是异步的，这里直接打印accounts还是旧值，要取新值直接用newAccounts
            console.log("获取到的账户：", newAccounts);

            const provider = new ethers.providers.Web3Provider(window.ethereum);
            console.log("provider：", provider);

            const signer = provider.getSigner(0);
            console.log("signer：", signer);

        } catch (error) {
            console.error("连接失败：", error);
        }
    };

    return (
        <div>
            {/* 调用封装的按钮组件，传入props */}
            <ConnectMetamaskButton 
                onClick={connectMetamask}
                Accounts={accounts.length > 0 ? accounts[0] : "点击连接钱包"}
            />
        </div>
    );
};

ConnectMetamaskButton.jsx 无需大改，保持原逻辑即可 #

export default function ConnectMetamaskButton(props) {
    return (
        <button className="btn-blue" onClick={() => props.onClick()}>
            地址：{props.Accounts}
        </button>
    );
}

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