如何在處理 setTimeOut() 函數時顯示加載程序

Question

需要顯示加載器 wile 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。

我不建議走這條路，而是只使用狀態來指示是否應顯示組件（例如加載圖標）。