Dispatch.dispatch（...）：无法在调度中间进行调度

Question

我需要在另一个名为“ SamplesPrinters”的组件内渲染一个名为“ PrintersField”的组件。

样品打印机： SamplesPrinters中有一些事件侦听器，用于侦听发生的任何状态变化并将其放置在ComponentDidMount（）中。 某些函数调用调度程序来调度操作。 当前正在分派动作时，它会更改状态，因此组件将被重新呈现。 组件的渲染也会渲染“ PrintersField”。

PrintersField： Component 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);
        }
      }
    }
...