WalletBalance.tsx 代币余额返回：未定义

Question

我已经完成了全栈 defi 课程，当我使用usedapp/core 中的 useTokenBalance 函数时，我没有返回任何内容，我不知道我哪里出了问题，因为当我 console.log 地址时以及它返回的帐户变量以及正确的帐户地址和正确的令牌地址。

这是这里的打字稿：

import {useEthers, useTokenBalance} from "@usedapp/core"
import {formatUnits} from "@ethersproject/units"

export interface WalletBalanceProps {
    token: Token
}

export const WalletBalance = ({token}: WalletBalanceProps) => {
    const {image, address, name} = token
    const {account} = useEthers()
    console.log(account)
    console.log(address)
    const tokenBalance = useTokenBalance(address, account)
    const formattedTokenBalance: number = tokenBalance ? parseFloat(formatUnits(tokenBalance, 18)) : 0
    console.log(tokenBalance?.toString())
    return (<div>{formattedTokenBalance}</div>)
}

我认为这可能是 @usedapp/core 的错误，但我重新安装了 @usedapp/core 并且仍然返回相同的错误。任何帮助都会有用的:)

Answer 1

您应该尝试更改 App.tsx 中的配置设置

import { DAppProvider, Config, Kovan } from "@usedapp/core"
import { Header } from "./components/Header";
import Container from "@mui/material/Container"
import { Main } from "./components/Main";
import { getDefaultProvider } from 'ethers'


const config: Config = {
  readOnlyChainId: Kovan.chainId,
  readOnlyUrls: {
    [Kovan.chainId]: getDefaultProvider('kovan'),
  },
}

function App() {
  return (
    <DAppProvider config={config} >
      <Header></Header>
      <Container maxWidth="md">
        <div className="App">
          <Main />
        </div>
      </Container>
    </DAppProvider>
  );
}

export default App;