Реагируйте async / await и setState без повторного рендеринга

Question

У меня проблема с повторным отображением после получения результата от вызова 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);
        });
    }

Но тоже не помогает. Есть идеи?

Answer 1

Почему вы объединяете 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 });

На мой взгляд, это делает код менее сложным, проще следить за происходящим и осмысливать его.

Answer 2

Вам нужно изменить функцию Async на функцию стрелки или связать функцию, чтобы она была доступна внутри этой функции

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