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;

Answer 2

我也有同样的问题。console.log返回正确的令牌和帐户地址，useTokenBalance()返回未定义的。