在类组件中使用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>
)}
}

​

当我在移动设备上连接时，它会显示一个弹出窗口，我可以在其中选择提供商。当我尝试在桌面上连接时，没有弹出任何东西，并且在从当前帐户检索余额时抛出错误"TypeError: Cannot read property 'state‘of undefined"：

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

如何在类组件中使用web3modal获取活期账户余额？

Answer 1

当您需要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/)，也许你不需要全部阅读。