Fresh框架中useState的setProvider无法更新provider变量的问题

核心问题排查与解决方法 #

1. 确保代码仅在客户端环境执行 #

Fresh的Island组件虽为客户端渲染，但部分逻辑可能意外在服务端运行，此时window.ethereum为undefined，导致Provider创建失败，状态无法更新。

• 解决：用Fresh提供的useIsClient钩子或直接判断window存在性，包裹Metamask相关逻辑：

import { useIsClient } from "$fresh/runtime.ts";
import { useState, useEffect } from "preact/hooks";
import { ethers } from "ethers";

export default function MetamaskIsland() {
  const isClient = useIsClient();
  const [provider, setProvider] = useState<ethers.providers.Web3Provider | null>(null);

  useEffect(() => {
    if (!isClient) return;
    // 仅在客户端执行Metamask相关操作
  }, [isClient]);

  // ...其他代码
}

2. 正视useState的异步更新特性 #

setProvider是异步操作，调用后立刻打印provider会拿到旧值，并非状态未更新。

• 解决：用useEffect监听provider变化来验证：

useEffect(() => {
  console.log("Provider已更新:", provider);
}, [provider]); // 仅当provider状态变化时触发

3. 完善Metamask连接流程 #

直接创建Provider可能因Metamask未注入、用户未授权失败，需先完成前置校验：

• 解决：先检查钱包可用性，再请求授权，最后创建Provider：

const connectMetamask = async () => {
  if (!window.ethereum) {
    alert("请先安装Metamask钱包");
    return;
  }
  // 请求用户授权账户访问
  await window.ethereum.request({ method: "eth_requestAccounts" });
  // 创建Provider并更新状态
  const newProvider = new ethers.providers.Web3Provider(window.ethereum);
  setProvider(newProvider);
};

4. 避免组件顶层执行异步逻辑 #

在组件顶层直接调用异步初始化代码，可能因执行时机错误导致状态更新失效，需放在useEffect或事件回调中。

• 错误示例：

// 组件顶层直接执行，易在服务端或初始化阶段出错
const init = async () => {
  const provider = new ethers.providers.Web3Provider(window.ethereum);
  setProvider(provider);
};
init();

• 正确做法：将初始化逻辑放在useEffect或点击事件（如连接按钮的onClick）中。

完整可运行示例代码 #

import { useIsClient } from "$fresh/runtime.ts";
import { useState, useEffect } from "preact/hooks";
import { ethers } from "ethers";

export default function MetamaskIsland() {
  const isClient = useIsClient();
  const [provider, setProvider] = useState<ethers.providers.Web3Provider | null>(null);
  const [account, setAccount] = useState<string | null>(null);

  useEffect(() => {
    if (!isClient) return;
    // 监听Metamask账户变化
    window.ethereum?.on("accountsChanged", (accounts: string[]) => {
      setAccount(accounts[0] || null);
    });
  }, [isClient]);

  const connectMetamask = async () => {
    if (!window.ethereum) {
      alert("请安装Metamask钱包");
      return;
    }
    try {
      const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });
      const newProvider = new ethers.providers.Web3Provider(window.ethereum);
      setProvider(newProvider);
      setAccount(accounts[0]);
    } catch (err) {
      console.error("连接Metamask失败:", err);
    }
  };

  // 验证Provider状态更新
  useEffect(() => {
    console.log("当前Provider状态:", provider);
  }, [provider]);

  return (
    <div>
      {!account ? (
        <button onClick={connectMetamask}>连接Metamask</button>
      ) : (
        <div>
          <p>已连接账户: {account}</p>
          <p>Provider状态: {provider ? "已初始化" : "未初始化"}</p>
        </div>
      )}
    </div>
  );
}

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