从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);
});
}
但也无济于事。 有任何想法吗?
答案 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))