Dispatch.dispatch (...): Невозможно отправить в середине отправки

Question

Мне нужно визуализировать компонент, скажем, «PrintersField», внутри другого компонента, скажем, «SamplesPrinters».

SamplesPrinters: В SamplesPrinters есть некоторые прослушиватели событий, которые прослушивают любые изменения состояния, которые происходят и помещаются в ComponentDidMount (). Некоторые функции вызывают диспетчер для отправки действий. Пока одно действие в данный момент отправляется, оно меняет состояние, поэтому компонент перерисовывается. Рендеринг компонента хорошо отображает PrintersField.

PrintersField: Компонент PrintersField также имеет некоторые действия, которые должны быть отправлены в его ComponentDidMount (). Когда он начинает диспетчеризацию, именно здесь возникает проблема, поскольку компонент SamplesPrinters отправляет действие, и оно еще не завершено.

сообщение об ошибке консоли: Dispatch.dispatch (...): Невозможно отправить в середине отправки.

Попытка отсрочки отправки действия с помощью setTimeout (). Но это не подходит для нашего приложения.

SamplesPrinters.jsx

function getPrintersState() {
  return {
    detailsList: PrintersStore.DetailsList(),
    formState: PrintersStore.formState()
    };
}

class SamplesPrinters extends React.Component {
  state = getPrintersState();
  componentDidMount() {
    PrintersStore.addChangeListener(this.onChange);
    PrintersActions.initCurrentUser(this.props.current_user);
     }

  componentWillUnmount() {
    PrintersStore.removeChangeListener(this.onChange);
  }

  render() {
    let printerButton;
      printerButton = (
        <div className="docked-footer”>
            <PrintersField
            />
        );
      return (
      <div className="Login">
        <PrintersForm formState={this.state.formState} />
        {printerButton}
      </div>
    );
  }

  onChange = () => {
     this.setState(getPrintersState());
  };

module.exports = SamplesPrinters;

PrintersField.jsx

class PrintersField extends React.Component {

  componentDidMount() {
    PrinterTestStore.addChangeListener(this.handleListChange);

    if (!PrinterTestStore.loading() && this.state.Printers.length === 0) {
      DataActions.initPrinters();
    }
  }

  componentWillUnmount() {
  PrinterTestStore.removeChangeListener(this.handleListChange);
  }

  render() {
      return (
      <SelectField
        className={classname}
        name="Printer"
        options={this.state.Printers}
        onSelectionChange={this.handleSelectChange}
        error={presentedError}
        {...props}
      />
    );
  }
}

module.exports = PrintersField;

PrintersActions.js

const  PrintersActions  =

initCurrentUser: function (value) {
  ajax({
    beforeSend: function () {
      AppDispatcher.dispatch({
        actionType: Actions.GET_PRINTERSVALUE_PROCESSING
      });
    },
    type: 'GET',
    url: URIUtils.createURI(‘/printers/test’, { accession: value }),
    success: function (data) {
      AppDispatcher.dispatch({
        actionType: Actions.GET_PRINTERSVALUE_SUCCESS,
        accessions: data
      });     
  });
}
};

DataActions.js

const DataActions = {

initPrinters: function () {
    ajax({
      beforeSend: function () {
        AppDispatcher.dispatch({
          actionType: DataConstants.Actions.GET_PRINTERS_STARTING
        });
      },
      type: 'GET',
      url: '/ref_data/printers',
      success: function (data) {
        AppDispatcher.dispatch({
          actionType: DataConstants.Actions.GET_PRINTERS_SUCCESS,
          printers: data
        });
      },
      error: function () {
        AppDispatcher.dispatch({
          actionType: DataConstants.Actions.GET_PRINTERS_FAIL
        });
      }
    });
  }
};

PrintersStore.js

...

let _DetailsList = [];

    const PrintersStore = Object.assign({}, EventEmitter.prototype, {
   …
  DetailsList: function () {
    return _DetailsList;
  },

  emitChange: function () {
    this.emit(CHANGE_EVENT);
  },

  addChangeListener: function (callback) {
    this.on(CHANGE_EVENT, callback);
  },

  removeChangeListener: function (callback) {
    this.removeListener(CHANGE_EVENT, callback);
  }
   …
});

 AppDispatcher.register((action) => {
      switch (action.actionType) {
       …
        case SamplesLoginConstants.Actions.GET_PRINTERSVALUE_SUCCESS:
          addPrintersToList(action.accessions);
          break;
       …
        default:
          return;
      }

    function addPrintersToList(accessions) {
      for (let h = 0; h < accessions.length; h += 1) {
        const accession = accessions[h];

        const existingAccession = find(_DetailsList, { id: accession.id });
        const addOnSpecifier = [];

        if (existingAccession) {
          remove(_DetailsList, { id: accession.id });
          for (let i = 0; i < accession.sampleSpecifiers.length; i += 1) {
            const specifier = accession.sampleSpecifiers[I];
            if (!(find(existingAccession.sampleSpecifiers, { id: container.id }))) {
              addOnSpecifier.push(specifier);
            }
          }
          if (addOnSpecifier.length) {
              existingAccession.sampleContainers =
              existingAccession.sampleContainers.concat(addOnSpecifier);
          }
          _DetailsList.unshift(existingAccession);
        } else {
          accession.status = null;
          _DetailsList.unshift(accession);
        }
      }
    }
...