时间戳

首页 > 解决方案 > 在类组件中使用 web3modal 显示状态错误

reactjs - 在类组件中使用 web3modal 显示状态错误

问题描述

我将 web3modal 与 walletconnect 和 portis 一起使用，配置如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
 import Web3Modal from "web3modal";
 import Portis from "@portis/web3";
 import WalletConnectProvider from "@walletconnect/web3-provider";

 class App extends Component{
  async getData(){
    const  providerOptions={
            injected:{
              display:{
             name: "Injected",
             description: "Connect with the provider in your Browser"
           },
           package:null
            },
           
            walletconnect:{
              package:WalletConnectProvider,
              options:{
                infuraId:"INFURA_ID"
              }
            },
          
            portis:{
     package:Portis,
     options:{
       id:"PORTIS_ID"
     }
            }
          }
      

     const web3Modal = new Web3Modal({
      network: "mainnet", // optional
      cacheProvider: true, // optional
      providerOptions // required
    });
     const provider = await web3Modal.connect();
  const web3=new Web3(provider)
  const accounts= await web3.eth.getAccounts()
  console.log(accounts)
  this.setState({account:accounts[0]})
      const networkId =  await web3.eth.net.getId()
      const mainNetwork =1
  
  const ethBalance = await web3.eth.getBalance(this.state.account) / 10 ** 18
  this.setState({ ethBalance })
  
  provider.on('accountsChanged', function (accounts) {
    this.setState({address:accounts[0]})
    window.location.reload();
  })
  
  provider.on('chainChanged', function (networkId) {
    window.location.reload();
  })
  provider.on("disconnect",function() {
   provider.close();
   web3Modal.clearCachedProvider();
   provider=null;
  });
}
 constructor(props) {
    super(props)
    this.state = {
    account: '',
    ethBalance:'0',
}
}
render(){
 return(
   <button className="position-relative" onClick={this.getData}>Get tokens</button>
)}
}

当我在移动设备上连接时，它会显示一个弹出窗口，我可以从中选择提供商。当我尝试在桌面上连接时，没有弹出任何内容，并且在从当前帐户检索余额时抛出错误“TypeError：无法读取未定义的属性'状态'”：

const ethBalance = await web3.eth.getBalance(this.state.account) / 10 ** 18
this.setState({ ethBalance })

如何在类组件中使用 web3modal 获取当前帐户的余额？

标签： reactjsweb3

解决方案

当您需要它时，您的this变量会丢失，因为您正在调用一个在其范围内建立新this变量的函数。

尝试改变

async getData() { ...}

至

const getData = async () {...}

我从React 得到了这个想法： this is null in event handler，你可以在那里阅读更多内容。该问题得分最高的答案采用不同的方法（实际上是两种不同的方法），但我认为这更好（来自不同的答案）。

不同之处在于箭头函数this在运行时基本上是不存在的。准确的解释很长（https://web.archive.org/web/20160625172303/http://blog.getify.com/arrow-this/），也许你不需要通读。

推荐阅读