反应 setstate 不 rerenering

Question

我有以下内容：

  onTransfer = async () => {
    this.setState({loading: true});
    try {
      const accounts = await web3.eth.getAccounts();
      await this.props.myData.methods.transferBalanceToOwner().send({
        from: accounts[0]
      });

      let contractBalance;
      await web3.eth.getBalance(this.props.address).then(function(result) {
        contractBalance = web3.utils.fromWei(result);
      });
      console.log('contract balance: ', contractBalance);

      this.setState({ contractBalance });
    } catch (error) {
      console.log('Transfer to owner error: ',error)
    }
    this.setState({loading: false});  
  }

我的 render() 中有以下内容

if (this.state.isOwner) {
  ownerUI = (
    <Container>
      <Divider/>
      <p>Contract balance: {this.state.contractBalance}</p>
      <Button loading={this.state.loading} onClick={this.onTransfer} primary>Transfer Balance</Button>
    </Container>
  )
}

由于某种原因，合约余额在 OnTransfer 后没有得到更新。有人可以发现我可能做错了什么吗？谢谢！

Answer 1

它的使用方式不正确async/await。

有async/await没有thenable
将 await 语句放入 try/catch 块中进行 success/error 检查。

正确的做法。

let contractBalance;

try {
   //success check

  contractBalance = await web3.eth.getBalance(this.props.address)
  this.setState({contractBalance});

}
catch (rejectedValue) {
  //error check

  console.log(rejectedValue)
}

反应 setstate 不 rerenering

react setstate not rerenering

rendering

setstate

reactjs