reactjs 如何使用react在网页上动态显示元掩码地址

5n0oy7gb  于 2022-11-29  发布在  React
关注(0)|答案(1)|浏览(145)

实际上,我可以获得元掩码帐户的地址,但每次我更改元掩码中的帐户时,特定组件似乎不会再次呈现。我不知道在useEffect的数组参数中添加什么,以便在不重新加载的情况下在网页上反映我的account中的更改。以下是app.js中定义的useStateuseEffect
我已经实现了元掩码连接功能。
JavaScript语言

const [account, setAccount] = useState(null)        // useState functionality

useEffect(() => {                                   // useEffect functionality
    const getaccount = async()=>{
      const accounts = await window.ethereum.request({method:'eth_accounts'});
      setAccount(accounts[0].toUpperCase())
    }
  
    getaccount();
  }, [])

HTML格式

return (
    <div className="App">
      <header className="App-header">
        <h1>First Dapp Application</h1>
        <p>Our account address is: {account ? account:"not connected"}</p>
      </header>
    </div>
  );

输出

b1uwtaje

b1uwtaje1#

我还没有测试过这段代码,但基本上,当帐户发生变化时,您需要在第一个页面加载挂钩上添加一个侦听器:

window.ethereum.on('accountsChanged', function (accounts) {
  setAccount(accounts[0].toUpperCase());
});

我不是ReactMaven,但我认为您可以添加另一个useEffect()用于初始化,如下所示:

useEffect(() => {
    window.ethereum.on('accountsChanged', function (accounts) {
        setAccount(accounts[0].toUpperCase());
    });
}, []);

相关问题