Question

需要显示装载程序setTimeOut()正在处理，而未使用状态（反应组件的状态）。

在函数处理数据之前，直到加载器显示在屏幕上，然后加载器应自动消失。

 showData = () => {
    if (!this.errorObject.isValid(this.getColHeader())) {
      alert('Please correct the invalid cells and try again...')
    } else {
      setTimeout(() => {
        const totalRows = this.hotTableComponent.current.hotInstance.countRows();
      const { data :{ dimensions } } = this.props;
      const nullString = dimensions.reduce((acc, currentValue) => acc + currentValue.delimiter, '');
      // eslint-disable-next-line no-plusplus
      for (let rowIndex = 0; rowIndex < totalRows; rowIndex++) {
        const rowData = this.hotTableComponent.current.hotInstance.getDataAtRow(rowIndex)
        rowData.pop();

        const genStr = rowData.reduce((acc, currentValue, index) => {
          const fieldData = dimensions[index].field.data;
          if (fieldData.valueListType === "value" && fieldData.valueType === "undefined") {
            if (fieldData.defaultValue) {
              currentValue = (currentValue) || fieldData.defaultValue;
            }
          } else if (fieldData.valueListType === "codeValue" && currentValue) {
            currentValue = currentValue.slice(currentValue.indexOf('(') + 1, currentValue.length - 1);
          }
          if (currentValue === null) {
            currentValue = ' ';
          }
          return acc + currentValue + dimensions[index].delimiter;
        }, '');

        if (nullString !== genStr) {
            this.updateCell(rowData, rowIndex, genStr);
        }
      }
      }, 100);
    }
  }

Answer 1

如果您确实（并且我的意思是真的）不想使用状态，则可以通过始终显示加载图标但不透明度为0来实现此目的。然后，在调用setTimeout之前，可以使用引用加载图标将其不透明度设置为1。然后在执行setTimeout时将其重新设置为0。

我不建议这样做，而只是使用一种状态来指示是否应显示组件（例如加载图标）。

在setTimeOut（）函数处理过程中如何显示加载程序

1 个答案: