在 class 组件中使用 web3modal 显示状态错误

Question

我使用带有 walletconnect 和 portis 的 web3modal，配置如下：

<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>
)}
}

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

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

如何在class组件中使用web3modal获取当前账户余额？

Answer 1

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

尝试改变

async getData() { ...}

至

const getData = async () {...}

我的想法来自，您可以在那里阅读更多内容。该问题得分最高的答案采用了不同的方法（实际上是两种不同的方法），但我认为这种方法更好（来自不同的答案）。

不同之处在于箭头函数在运行时基本上不理会 this。准确的解释很长(https://web.archive.org/web/20160625172303/http://blog.getify.com/arrow-this/)，也许你不需要全部看完

在 class 组件中使用 web3modal 显示状态错误

Using web3modal in class component shows state error

reactjs

web3