在Next.js中用Wagmi与RainbowKit Hooks实现账户切换自动更新余额

原代码的核心问题：

• 使用了@wagmi/core的getAccount()方法（非React Hook），无法监听账户状态变化
• useEffect依赖为空数组，仅在组件挂载时执行一次，切换账户不会触发余额重新获取

正确做法是使用wagmi提供的React Hooks，这类Hooks会自动监听账户、链状态变化，自动更新数据：

修改后的代码 #

import React from 'react';
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { useAccount, useBalance } from 'wagmi';
import type { NextPage } from 'next';

const WalletPage: NextPage = () => {
  // 用useAccount Hook实时监听账户状态
  const { address, isConnected } = useAccount();

  // 获取原生代币余额，自动响应账户/链变化
  const { data: balance, isLoading: isBalanceLoading } = useBalance({
    address,
    enabled: isConnected, // 仅钱包连接时发起请求
  });

  // 获取自定义代币余额，自动响应账户/链变化
  const { data: tokenBalance, isLoading: isTokenBalanceLoading } = useBalance({
    address,
    token: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
    enabled: isConnected,
  });

  return (
    <div>
      <ConnectButton />
      {isConnected ? (
        <>
          {isBalanceLoading ? (
            <p>加载余额中...</p>
          ) : (
            <p>Balance: {balance?.formatted} {balance?.symbol}</p>
          )}
          {isTokenBalanceLoading ? (
            <p>加载代币余额中...</p>
          ) : (
            <p>Token Balance: {tokenBalance?.formatted} {tokenBalance?.symbol}</p>
          )}
        </>
      ) : (
        <p>请连接钱包查看余额</p>
      )}
    </div>
  );
};

export default WalletPage;

关键改动说明 #

• 替换getAccount()为useAccount：该Hook会实时返回当前连接的账户信息，账户切换时组件自动重新渲染
• 替换手动fetchBalance+useState为useBalance：这是wagmi专门用于余额查询的Hook，自动处理：
  • 账户切换时重新拉取余额
  • 链切换时重新拉取余额
  • 内置加载状态，无需手动管理加载逻辑
• 添加enabled参数：确保仅在钱包连接状态下发起请求，避免无意义的错误请求

修改完成后，切换MetaMask账户时，余额会自动更新，无需手动刷新页面。

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