在打电话时解决反应冻结问题

Question

我试图设置一个微调器，而我的反应应用程序拨打几个电话。我正在写一个带有web3和可靠性的Dapp。在调用我的智能合约时，我尝试将状态设置为显示一个微调器，但整个应用程序在调用合同时冻结，在调用并返回值后设置微调器并快速取消微调器（你可以看到记录boolean的值更改控制台）。该应用程序解冻并继续。在调用时，如何设置微调器以及应用程序不冻结：

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);在将它放入Promise.all之前已经调用过它

和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