Блог

Главная - Вопросы по программированию - Как я могу показать загрузчик во время обработки функции setTimeout()

Как я могу показать загрузчик во время обработки функции setTimeout()

#javascript #reactjs

#javascript #reactjs

Вопрос:

Необходимо показать загрузчик setTimeOut() , который обрабатывает функция wile, без использования состояний (состояние компонента react).

Когда функция обрабатывает данные до этого, загрузчик должен отображаться на экране, после чего загрузчик должен автоматически исчезнуть.

  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" amp;amp; fieldData.valueType === "undefined") {
            if (fieldData.defaultValue) {
              currentValue = (currentValue) || fieldData.defaultValue;
            }
          } else if (fieldData.valueListType === "codeValue" amp;amp; 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);
    }
  }

Комментарии:

1. создайте логическую переменную isLoading, сделайте ее true в начале функции и после того, как все будет сделано, сделайте ее false . Визуализируйте компонент, когда isLoading имеет значение true, этот компонент должен показывать счетчик.

2. Почему «без использования состояний»? Это будет трудно, если не невозможно, достичь без изменения переменной в состоянии вашего компонента и использования ее для условного отображения индикатора загрузки.

3. «без использования состояний» — обновление состояния — это именно то, как вы повторно визуализируете компонент в React. Если вы не хотите использовать React, тогда зачем вы используете React?

4. @David я не хочу использовать состояния, так как я использую пакет handsontable, который имеет различные перехваты для проверки различных данных в электронной таблице. И когда я использую state, он перезагружается, и все проверки исчезают, чего я не хочу. И эта логика проверки срабатывает при нажатии кнопки, которая объединяет данные всех строк в одну ячейку.

Ответ №1:

Если вы действительно, и я имею в виду действительно, не хотите использовать состояния, вы можете добиться этого, если значок загрузки всегда отображается, но имеет непрозрачность 0. Затем перед вызовом setTimeout вы можете использовать ссылку на значок загрузки, чтобы установить его непрозрачность равной 1. Затем вы можете снова установить его на 0 при setTimeout выполнении.

Я бы не советовал идти по этому пути, а вместо этого просто использовать состояние, чтобы указать, должен ли отображаться компонент (например, значок загрузки).

Метки: