解决拨打电话时反应中的冻结问题

Question

我正在尝试设置一个微调器，而我的反应应用程序进行了几次调用。我正在编写一个具有 web3 和坚固性的 Dapp。在调用我的智能合约时，我尝试设置状态以显示微调器，但是在调用合约时整个应用程序冻结，在调用并返回值后，它会设置微调器并取消设置微调器(您可以看到值更改控制台记录布尔值(。应用程序解冻并继续。如何设置微调器，并在调用时不冻结应用程序：

onSubmit(e) {
e.preventDefault();
// inProcessOfCalling sh
this.setState({ inProcessOfCalling: true });
...
const contractData = callContract(parseTestJson.steps, web3);
Promise.all(contractData).then((values) => {
...
// turn spinner off
this.setState({ inProcessOfCalling: false });
});
}
function callContract(callInfo, web3) {
const dataArr = [];
for (let i = 0; i < callInfo.length; i += 1) {
// ...
const getData = thisContract[callInfo[i].func].getData(
...callInfo[i].args,
{ from: callInfo[i].from },
);
// ...
const trans = web3.eth.sendTransaction({
to: callInfo[i].contract,
from: callInfo[i].from,
data: getData,
});
let receipt = web3.eth.getTransactionReceipt(trans);
returnObj = {
receipt,
testName: callInfo[i].name,
expectPassed: callInfo[i].expects.success === transactionPassed,
expectMessage: callInfo[i].expects.message,
};
dataArr.push({ error: false, returnObj });
}
return dataArr;
}

我不认为这是一个 web3 问题。我认为它会通过对 API 进行任何多次提取调用来冻结应用程序。

Answer 1

您已经在调用callContract函数，该函数很重，这里的请求<- 这是导致hang

const contractData = callContract(parseTestJson.steps, web3);在你把它放进一个承诺之前，它已经被调用了。

contractData根本不是 Promise，您可以做的就是在该函数中返回一个 Promise 对象，如下所示

function callContract(callInfo, web3) {
return new Promise((resolve, reject) => {
const dataArr = [];
for (let i = 0; i < callInfo.length; i += 1) {
// ...
const getData = thisContract[callInfo[i].func].getData(
...callInfo[i].args, {
from: callInfo[i].from
},
);
// ...
const trans = web3.eth.sendTransaction({
to: callInfo[i].contract,
from: callInfo[i].from,
data: getData,
});
let receipt = web3.eth.getTransactionReceipt(trans);
returnObj = {
receipt,
testName: callInfo[i].name,
expectPassed: callInfo[i].expects.success === transactionPassed,
expectMessage: callInfo[i].expects.message,
};
dataArr.push({
error: false,
returnObj
});
}
resolve(dataArr);
}
}

在此处了解有关承诺的更多信息 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise