无法读取Goerli测试网区块链数据问题求助

我无法读取Goerli测试网的区块链数据（有输出页面截图），点击按钮后能识别到函数调用，但始终无法获取到数据。

相关代码 #

import { useEffect, useState } from "react";
import { ethers } from "ethers";
import ABI from "./ABIS/convertAbi.json";

function Temp() {
const [value, setvalue] = useState(null);
const [input, setInput] = useState(null);
const feather = async () => {
console.log("working");
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
const contract = new ethers.Contract(
  AddressofCOntract,
  ABI,
  signer
);
const dollarValue = await contract.getDollartoEth(input);
console.log(dollarValue);
setvalue(dollarValue);
};
useEffect(() => {
feather();
 }, []);

return (
<div>
  <input
    value={input}
    type="number"
    onInput={(e) => setInput(e.target.value)}
  />
  <h1> Dollar : {value}</h1>
  <p>Ether : {input}</p>
  <button onClick={feather}>Convert</button>
</div>
);
}

export default Temp;

问题排查与修复方案 #

1. 初始化参数无效

组件挂载时useEffect自动调用feather，但此时input为null，传给合约的参数无效，直接导致调用失败。

• 修复：移除挂载时的自动调用，或给input设初始空字符串并在调用前检查输入有效性。

2. 合约地址未定义

代码中的AddressofCOntract是占位符，必须替换为Goerli测试网的实际合约地址（格式为0x开头的十六进制字符串）。

3. 未检查网络环境

用户钱包可能未切换到Goerli测试网，导致连接的网络与合约部署网络不匹配，无法获取数据。

• 修复：添加网络检查，确保当前连接的是Goerli（chainId为5）。

4. 未捕获异步错误

feather函数未添加try-catch，调用合约出错时无法定位问题根源。

• 修复：添加错误捕获，打印错误信息便于排查。

5. BigNumber处理问题

ethers调用合约返回的是BigNumber类型，直接渲染会显示异常，需要转换为字符串或数字。

修复后的代码示例 #

import { useEffect, useState } from "react";
import { ethers } from "ethers";
import ABI from "./ABIS/convertAbi.json";

// 替换为你的Goerli合约地址
const CONTRACT_ADDRESS = "0xYourGoerliContractAddress";

function Temp() {
  const [value, setValue] = useState(null);
  const [input, setInput] = useState("");
  const [errorMsg, setErrorMsg] = useState(null);

  const feather = async () => {
    // 检查输入有效性
    if (!input || isNaN(Number(input))) {
      setErrorMsg("请输入有效的ETH数量");
      return;
    }
    setErrorMsg(null);

    try {
      // 检查钱包是否存在
      if (!window.ethereum) {
        throw new Error("请安装MetaMask等以太坊钱包");
      }

      const provider = new ethers.providers.Web3Provider(window.ethereum);
      // 检查网络是否为Goerli
      const network = await provider.getNetwork();
      if (network.chainId !== 5) {
        throw new Error("请切换到Goerli测试网");
      }

      const signer = provider.getSigner();
      const contract = new ethers.Contract(CONTRACT_ADDRESS, ABI, signer);
      
      // 根据合约函数参数类型调整输入，示例假设需要BigNumber
      const dollarValue = await contract.getDollartoEth(ethers.utils.parseUnits(input, 18));
      // 转换为字符串显示
      setValue(dollarValue.toString());
    } catch (err) {
      console.error("调用失败:", err);
      setErrorMsg(err.message);
    }
  };

  return (
    <div>
      {errorMsg && <p style={{ color: "red" }}>{errorMsg}</p>}
      <input
        value={input}
        type="number"
        onChange={(e) => setInput(e.target.value)}
        placeholder="输入ETH数量"
      />
      <h1>美元价值: {value}</h1>
      <p>ETH数量: {input}</p>
      <button onClick={feather}>转换</button>
    </div>
  );
}

export default Temp;

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