在这段代码中,我想在我的UI上显示tokenbalance和nativebalance
我用的是wagmi和rainbowkit
import React, { useEffect, useState } from 'react';
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { fetchBalance,getAccount } from '@wagmi/core';
import type { NextPage } from 'next';
const WalletPage: NextPage = () => {
const account = getAccount()
const [balance, setBalance] = useState();
const [tokenBalance, setTokenBalance] = useState();
useEffect(() => {
const fetchData = async () => {
try {
const balanceData = await fetchBalance({
address: account.address,
});
setBalance(balanceData);
const tokenBalanceData = await fetchBalance({
address: account.address,
token: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
});
setTokenBalance(tokenBalanceData);
} catch (error) {
console.error(error);
}
};
fetchData();
}, []);
return (
<div>
<ConnectButton />
{balance && (
<p>
Balance: {balance.formatted} {balance.symbol}
</p>
)}
{tokenBalance && (
<p>
Token Balance: {tokenBalance.formatted} {tokenBalance.symbol}
</p>
)}
</div>
);
};
export default WalletPage;
当我在metamask中更改帐户时,在connectButton模块上一切正常,但在我的UI中,我必须手动刷新以获得标记,我知道在使用钩子时不应该这样做。那么,使用wagmi钩子的正确方法是什么呢?
我需要在metamask中cahnging帐户时在我的ui上获得tokenBalance和本地余额
1条答案
按热度按时间olqngx591#
这是因为你正在使用效果依赖项没有设置为监听帐户中的更改。当你使用[]时,你告诉useEffect运行一次。如果您希望再次运行此操作,则应确保添加一个依赖项,以便当该依赖项的值更改时,它会导致useEffect再次触发。
也许你可以尝试一些类似的东西;
如果account.address更改,这将导致useEffect再次运行。但是,在这样做时要小心。它可能会导致您的效果多次触发,因此最好在状态中保留当前地址的副本,并在再次获取之前在if条件中检查该值。