reactjs React异步/等待和setState不重新呈现

gjmwrych 于 2023-03-17 发布在 React

关注(0)|答案(2)|浏览(181)

从web 3调用-智能合约的执行中获取结果后，我遇到了一个重新呈现的问题。代码如下：

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

但也无济于事。有什么办法吗？

reactjs

来源：https://stackoverflow.com/questions/53133806/react-async-await-and-setstate-not-rerendering

2条答案

按热度按时间

icomxhvb1#

为什么要把await和承诺结合起来？
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 });

在我看来，这使得代码不那么复杂，更容易跟踪正在发生的事情并理解它。

赞(0）回复(0）举报 2023-03-17

enyaitl32#

您需要将Async函数更改为arrow函数或绑定该函数，以便在该函数中可用

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

赞(0）回复(0）举报 2023-03-17

我来回答

reactjs React异步/等待和setState不重新呈现

2条答案

相关问题

热门标签

最新问答