Web3.js调用getBalance转fromWei后如何存储变量并展示在React表格

核心问题梳理 #

• 直接将checkBalance函数对象作为React子元素渲染，是报错的直接原因
• 异步查询的余额没有存入响应式状态，无法同步到视图
• web3.utils.fromWei()调用缺少入参，且await/then混用逻辑冗余
• 没有指定余额查询的触发时机（组件挂载、账户变更时）

修正后代码 #

import { useState, useEffect } from 'react'
const Web3 = require("web3");

function App(){
  // 声明存储ETH余额的响应式状态
  const [ethBalance, setEthBalance] = useState("--");
  // 这里保留你已有的account变量定义
  // const account = ...

  const web3 = new Web3(
    Web3.givenProvider ||
      "https://ropsten.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161"
  );

  async function fetchEthBalance() {
    if (!account) return;
    try {
      // 先获取wei单位的余额
      const balanceInWei = await web3.eth.getBalance(account);
      // 转换为ETH单位，必须传入余额参数
      const balanceInEth = web3.utils.fromWei(balanceInWei, "ether");
      // 存入状态触发视图更新
      setEthBalance(balanceInEth);
    } catch (error) {
      console.log("余额查询失败：", error);
      setEthBalance("查询失败");
    }
  }

  // 组件挂载、account变量变化时自动触发余额查询
  useEffect(() => {
    fetchEthBalance();
  }, [account, web3]);

  return (
    <Table variant="striped" width="100%">
      <TableCaption>Token balances of {account}</TableCaption>
      <Thead>
        <Tr>
          <Th>Token</Th>
          <Th>Contract Address</Th>
          <Th>Balance</Th>
        </Tr>
      </Thead>
      <Tbody>
        <Tr>
          <Td>ETH</Td>
          <Td>0x0000000000000000000000000000000000000000</Td>
          {/* 直接渲染状态变量即可 */}
          <Td>{ethBalance}</Td>
        </Tr>
      </Tbody>
      <Tfoot>
        <Tr>
          <Th>Token</Th>
          <Th>Contract Address</Th>
          <Th>Balance</Th>
        </Tr>
      </Tfoot>
    </Table>
  )
}

兼容低版本React说明 #

如果你使用的是16.8以下不支持Hook的React版本，可以将状态和查询逻辑放在类组件的state和componentDidUpdate生命周期中实现，逻辑完全一致。

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