React中MetaMask地址动态显示问题：切换账户后组件未重新渲染

已成功获取MetaMask账户地址，但每次在MetaMask中切换账户时，对应组件并未重新渲染，无法无需刷新页面同步更新页面上的account状态。现有代码如下：

JavaScript #

const [account, setAccount] = useState(null)        // useState functionality

useEffect(() => {                                   // useEffect functionality
    const getaccount = async()=>{
      const accounts = await window.ethereum.request({method:'eth_accounts'});
      setAccount(accounts[0].toUpperCase())
    }
  
    getaccount();
  }, [])

HTML #

return (
    <div className="App">
      <header className="App-header">
        <h1>First Dapp Application</h1>
        <p>Our account address is: {account ? account:"not connected"}</p>
      </header>
    </div>
  );

输出 #

解决方案 #

你当前的useEffect仅在组件挂载时执行一次，所以切换账户后不会重新获取账户信息。要实现账户切换时自动更新，需要监听MetaMask提供的accountsChanged事件，具体修改如下：

const [account, setAccount] = useState(null);

useEffect(() => {
  // 获取当前账户
  const getAccount = async () => {
    const accounts = await window.ethereum.request({ method: 'eth_accounts' });
    setAccount(accounts.length > 0 ? accounts[0].toUpperCase() : null);
  };

  // 账户变化时的处理函数
  const handleAccountChange = (accounts) => {
    setAccount(accounts.length > 0 ? accounts[0].toUpperCase() : null);
  };

  // 初始化获取账户
  getAccount();

  // 注册账户变化监听
  window.ethereum.on('accountsChanged', handleAccountChange);

  // 组件卸载时移除监听，避免内存泄漏
  return () => {
    window.ethereum.removeListener('accountsChanged', handleAccountChange);
  };
}, []); // 依赖数组保持为空，仅在挂载/卸载时执行

关键说明：

• accountsChanged是MetaMask的标准事件，当用户切换账户、连接/断开钱包时会触发，回调函数会接收新的账户列表。
• 增加了账户数组长度判断，处理用户断开钱包的场景，避免出现undefined。
• 组件卸载时移除事件监听，防止内存泄漏问题。

修改后，切换MetaMask账户时，页面的account状态会自动更新，组件随之重新渲染，无需手动刷新页面。

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