Javascript 如何在setTimeOut()函数处理时显示加载程序

Javascript 如何在setTimeOut()函数处理时显示加载程序,javascript,reactjs,Javascript,Reactjs,需要显示加载程序wile setTimeOut函数正在处理,而不使用statesreact组件的状态 当该功能处理数据时,加载程序应显示在屏幕上,然后加载程序应自动消失 showData = () => { if (!this.errorObject.isValid(this.getColHeader())) { alert('Please correct the invalid cells and try again...') } else {

需要显示加载程序wile setTimeOut函数正在处理,而不使用statesreact组件的状态

当该功能处理数据时,加载程序应显示在屏幕上,然后加载程序应自动消失

 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);
    }
  }

如果你真的,我的意思是,真的,不想使用状态,你可以通过让加载图标始终被渲染,但不透明度为0来实现这一点。然后在调用setTimeout之前,可以使用加载图标的ref将其不透明度设置为1。然后,可以在执行setTimeout时再次将其设置为0


但我不建议这样做,而是使用状态指示是否应显示加载图标等组件。

创建布尔变量isLoading,在函数开始时将其设置为true,完成所有操作后将其设置为false。当isLoading为true时呈现组件,该组件应显示微调器。为什么不使用状态?如果不更改组件状态中的变量并使用该变量有条件地呈现加载指示器,则很难实现。如果不使用状态,则更新状态正是您在React中重新呈现组件的方式。如果你不想使用React,那么为什么要使用React?@David我不想使用states,因为我使用的是handsontable包,它有各种钩子来验证电子表格中的不同数据。当我使用state时,它会重新加载,所有的验证都会消失,这是我不想要的。点击一个按钮就会触发验证逻辑,将所有行的数据合并到单个单元格中。