React useContext实现钱包连接按钮全局状态存储问题排查

先梳理原代码中的核心问题：

• 上下文命名混淆，状态变量命名不规范
• 组件挂载时自动触发钱包连接，不符合点击按钮触发的需求
• 未检查window.ethereum的存在性，缺乏错误处理
• Navbar中错误地直接调用Context组件的内部方法，未通过useContext获取上下文内容
• Context仅传递账户状态，未提供连接方法，子组件无法触发连接操作
• 无账户时返回null导致整个应用子树不渲染

修复后的完整代码 #

1. 全局Context组件（userContext.js）

import React, { useState, createContext, useContext } from 'react';

// 创建上下文，命名更清晰
const AccountContext = createContext();

export const AccountProvider = ({ children }) => {
  // 状态变量命名更直观
  const [currentAccount, setCurrentAccount] = useState(null);

  // 钱包连接函数，增加错误处理和环境检查
  const connectWallet = async () => {
    try {
      // 检查MetaMask是否安装
      if (!window.ethereum) {
        alert('请先安装MetaMask钱包');
        return;
      }

      // 请求授权账户
      const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
      setCurrentAccount(accounts[0]);
    } catch (error) {
      console.error('钱包连接失败:', error);
      alert('钱包连接失败，请重试');
    }
  };

  // 监听账户切换（可选，增强体验）
  useState(() => {
    if (window.ethereum) {
      const handleAccountChange = (accounts) => {
        setCurrentAccount(accounts[0] || null);
      };

      window.ethereum.on('accountsChanged', handleAccountChange);
      return () => {
        window.ethereum.removeListener('accountsChanged', handleAccountChange);
      };
    }
  }, []);

  // 始终渲染Provider，传递状态和方法
  return (
    <AccountContext.Provider value={{ currentAccount, connectWallet }}>
      {children}
    </AccountContext.Provider>
  );
};

// 自定义Hook，简化子组件获取上下文的操作
export const useAccount = () => {
  return useContext(AccountContext);
};

2. Navbar组件（Navbar.js）

import { useAccount } from './userContext';

const Navbar = () => {
  const { currentAccount, connectWallet } = useAccount();

  return (
    <nav>
      {currentAccount ? (
        <span>已连接: {currentAccount.slice(0, 6)}...{currentAccount.slice(-4)}</span>
      ) : (
        // 点击时绑定函数，而非直接调用
        <button onClick={connectWallet}>连接钱包</button>
      )}
    </nav>
  );
};

export default Navbar;

3. 应用入口（App.js）

import { AccountProvider } from './userContext';
import Navbar from './Navbar';
import OtherComponent from './OtherComponent';

function App() {
  return (
    <AccountProvider>
      <Navbar />
      <OtherComponent />
    </AccountProvider>
  );
}

export default App;

4. 其他组件调用示例（OtherComponent.js）

import { useAccount } from './userContext';

const OtherComponent = () => {
  const { currentAccount } = useAccount();

  return (
    <div>
      {currentAccount ? (
        <p>当前用户账户: {currentAccount}</p>
      ) : (
        <p>请先连接钱包</p>
      )}
    </div>
  );
};

export default OtherComponent;

关键修复点说明 #

• 统一上下文命名为AccountContext，用自定义HookuseAccount简化上下文调用，避免命名混淆
• 移除自动连接逻辑，改为点击按钮触发connectWallet函数，符合需求
• 增加window.ethereum存在性检查和错误捕获，提升代码鲁棒性
• Context的Provider始终渲染，确保子组件能获取上下文，无账户时状态为null而非不渲染子树
• Navbar中通过useAccount获取连接方法和账户状态，点击按钮绑定函数而非直接执行
• 新增账户切换监听，当用户在MetaMask中切换账户时，应用状态同步更新

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