反应异步/等待和setState不重新呈现

时间:2018-11-03 17:30:31

标签: javascript reactjs async-await web3

从web3调用获取结果后,我有重新渲染的问题-执行智能合约。下面的代码:

this.setState({ loading: true });

await contractInstance.methods
                .myMethod(params)
                .send({ from: myAccount, gas: 10000000 })
                .then(async function(receipt) {
                    let txHash = receipt.transactionHash;
                    ...

                    // await saveToDb(thHash, ...)

                    this.setState({ dateToDisplay: myVar.publishDate, loading: false });

..

渲染如下:

render() {
        if (!this.state.loading) {
            return (
            ...
             {this.state.dateToDisplay}

我还有其他方法可以使用此模式,但是在这里我无法使其工作。我试图使setState异步并等待它,例如:

setStateAsync(state) {
        return new Promise(resolve => {
            this.setState(state, resolve);
        });
    }

但也无济于事。 有任何想法吗?

2 个答案:

答案 0 :(得分:3)

您为什么结合await和Promise?

await的意义是在那一点上停止执行,并等待诺言解决。 const result = await promise;替代了promise.then(result => ...)

您可以这样做:

const receipt = await contractInstance.methods
    .myMethod(params)
    .send({ from: myAccount, gas: 10000000 });

let txHash = receipt.transactionHash;
...

// await saveToDb(thHash, ...)

this.setState({ dateToDisplay: myVar.publishDate, loading: false });

在我看来,这使代码减少了复杂性,并且更容易理解正在发生的事情并理解了它。

答案 1 :(得分:2)

您需要将异步功能更改为箭头功能或绑定该功能,以便该功能在该功能内可用

     await contractInstance.methods
            .myMethod(params)
            .send({ from: myAccount, gas: 10000000 })
            .then(async receipt => {
                let txHash = receipt.transactionHash;
                ...

                // await saveToDb(thHash, ...)

                this.setState({ dateToDisplay: myVar.publishDate, loading: false });

或绑定

    await contractInstance.methods
            .myMethod(params)
            .send({ from: myAccount, gas: 10000000 })
            .then(async function(receipt) {
                let txHash = receipt.transactionHash;
                ...

                // await saveToDb(thHash, ...)

                this.setState({ dateToDisplay: myVar.publishDate, loading: false });
            }.bind(this))