I tried a lot in an attempt to run this, but React State is not changing, when trying to fetch account balance

Question

I am trying to fetch the account balance as seen below I have highlighted the h2 tag (below with ////////// ) for retrieving account balance, but when I console.log(this.state), I getting the predefined values which I declared in constructor and not able to get the changed state, Kindly please do check the error that I am getting in the picture :Picture of error

    import logo from './logo.svg';
    import './App.css';
    import bodyImage from "./main-image.png";
    import React, { Component } from 'react'
    
    const {ethers,Contract,providers}=require("ethers")
    
    class App extends Component {
    
    constructor(){
      super()
      this.state={
        defaultAccount:null,
        addressClick:true,
        aggregatContract:null,
        daiContract:null,
        cDaiContract:null,
        AaveLendingPoolContract:null,
        ethers:null,
        walletBalance:"5",
        aggregatorBalance:null,
        location:null,
        dai_address: "0x6B175474E89094C44Da98b954EedeAC495271d0F",
        cDAI_address: "0x5d3a536E4D6DbD6114cc1Ead35777bAB948E3643",
        aaveLendingPool_address: "0x7d2768dE32b0b80b7a3454c06BdAc94A69DDc7A9"
    
      }
    
    
    }
    
    
    componentWillMount() {
      this.loadWindow()
    }
    
    async loadWindow(){
      if(window.ethereum){
        await window.ethereum.request({method:'eth_requestAccounts'}).then((result)=>{
          this.setState({defaultAccount:result[0]})
          this.setState({addressClick:false})
          this.setState({ethers:ethers})
          //window.alert("Wallet Connected")
    
        })
        await this.loadWeb3Data()
    
      }else{
        window.alert("No ethereum account detected...")
      }
    }
    
    
    
    async loadWeb3Data(){
    
      const AggregatorAbi=[
        "function deposit(uint256 fund, uint256 _aveAPY, uint256 _compAPY) public",
        "function Withdraw() public onlyOwner",
        "function whereBalance() public view returns(address)",
        "function ContractBalance() public view returns(uint256)",
        "function reBalance( uint256 _aveAPY, uint256 _compAPY ) public onlyOwner"
      ]
      const daiAbi=[
        "function approve(address usr, uint wad) external returns (bool)",
        " function transfer(address dst, uint wad) external returns (bool)",
        "function transferFrom(address src, address dst, uint wad) public returns (bool)",
        "function balanceOf(address) external view returns (uint256)"
      ]
    
      const cDaiAbi=[
        "function mint(uint256) external returns (uint256)",
        "function redeem(uint256) external returns (uint256)",
        "function supplyRatePerBlock() external returns (uint256)",
        " function balanceOf(address) external view returns (uint256)"
      ]
      const AaveLendingPoolAbi=[
    
        "function deposit(address asset,uint256 amount,address onBehalfOf,uint16 referralCode) external",
        "function withdraw(address asset,uint256 amount,address to) external"
      ]
    
      
     const provider=new providers.Web3Provider(window.ethereum)
      //const aggregatContract = await Contract("0x42b71288FE55B1a3857Ecc1B28614Cf56272aDE7",AggregatorAbi);
      //this.setState({aggregatContract});
      window.alert("Start")
      const daiContract=new Contract("0x6B175474E89094C44Da98b954EedeAC495271d0F",daiAbi,provider);
    
       this.setState({daiContract:daiContract})
    
      const cDaiContract= new Contract("0x5d3a536E4D6DbD6114cc1Ead35777bAB948E3643",cDaiAbi,provider)
       this.setState({cDaiContract:cDaiContract})
    
      const AaveLendingPoolContract=new Contract("0x7d2768dE32b0b80b7a3454c06BdAc94A69DDc7A9",AaveLendingPoolAbi,provider)
       this.setState({AaveLendingPoolContract:AaveLendingPoolContract})
    
    await this.fetchAccountInfo()
    
    }
    
    
    async fetchAccountInfo(){
    console.log(this.state)
    
    let walletBalance=await this.state.daiContract.balanceOf(this.state.defaultAccount)
     console.log(this.state)
    
      window.alert("stop")
    
      //let aggregatorBalance =await this.state.aggregatContract.amountDeposited()
    
        walletBalance = this.state.ethers.utils.formatEther(walletBalance, 'ether')
            //aggregatorBalance = this.state.ethers.utils.formatEther(aggregatorBalance, 'ether')
    
        this.setState({walletBalance:walletBalance});
        //this.setState({aggregatorBalance:aggregatorBalance});
    
        //const activelocation= this.state.aggregatContract.balanceWhere();
        //activelocation===this.state.aaveLendingPool_address? this.setState({location:"Aave lending platform"}):this.setState({location:"Compound Platform"});
        
    }
    
    
      render() {
        return (
          <div className="App">
    
         <div className="Navbar">
           <h4 className='Text'>Aggregator Rebalancer</h4>
            <div  className="Address">
            {this.state.addressClick?<button type="button" className='Connect'>Connect Wallet</button>:<h4>{this.state.defaultAccount}</h4>}
            </div>
         </div>
    
         <div className='Body-component'>
         <div className="Heading">
          <h1>Funds Rebalancer</h1>
         </div>
    
         <center><img className='Diag' src={bodyImage} alt="blockchain" /></center>
///////////////////////////////////////////////////////////////////////

     ===>>>**<h2>{this.state.walletBalance}</h2>**<<<===

///////////////////////////////////////////////////////////////////
         <div className="InputData">
         <form className='Data' onSubmit={(e) => {
                                        e.preventDefault()
                                    }}>
                                        <input type="number" placeholder="Amount"/>
                                        <button type="submit" className="Button">Deposit</button>
                      <button type="submit" className="Button">Rebalance</button>
                      <button type="submit" className="Button">Withdraw</button>
                                    </form>
         </div>
         <div className="Text">
    
         </div>
        </div>
        </div>
        )
      }
    }

Murat Çelik Murat Çelik · Accepted Answer · 2022-06-12T16:08:43

Why did you use then method while you are using await at the same time? Would you please try like this?

const result = await window.ethereum.request({ method: 'eth_requestAccounts' })
this.setState({ defaultAccount: result[0], addressClick: false, ethers: ethers })

I tried a lot in an attempt to run this, but React State is not changing, when trying to fetch account balance

1 Answers