ReactJS Flux Dispatcher.js 错误：this._callbacks[id] 不是函数

Question

我在我的应用程序中使用 ReactJS 和 Flux，并且在节点 0.10 上一切正常。版本，我升级到 0.12，现在我在 Flux Dispatcher.js 文件中遇到错误。

这是我得到的错误：

Uncaught TypeError: this._callbacks[id] is not a function.

导致问题的代码是：

Dispatcher.prototype._invokeCallback = function _invokeCallback(id) {
    this._isPending[id] = true;
    this._callbacks[id](this._pendingPayload);
    this._isHandled[id] = true;
  };

我是否需要更改 Dispatcher 以符合 ES6 语法。

我需要更改我的应用特定类以进行升级。

我认为我在下面所做的更改导致了问题。

// This is what i ad before the upgrade
//this.subscribe(() => this._registerToActions.bind(this));
// I changed it to below after the upgrade as i was getting errors.
this._registerToActions = this._registerToActions.bind(this);

当我收到错误时，我不得不更改它：

Uncaught TypeError: this.subscribe is not a function

这是完整的堆栈跟踪：

Uncaught TypeError: this._callbacks[id] is not a function_invokeCallback @ build.js:212dispatch @ build.js:188loginUser @ build.js:28479login @ build.js:28893executeDispatch @ build.js:6975SimpleEventPlugin.executeDispatch @ build.js:21216forEachEventDispatch @ build.js:6963executeDispatchesInOrder @ build.js:6984executeDispatchesAndRelease @ build.js:6353forEachAccumulated @ build.js:23237EventPluginHub.processEventQueue @ build.js:6560runEventQueueInBatch @ build.js:14926ReactEventEmitterMixin.handleTopLevel @ build.js:14952handleTopLevelImpl @ build.js:15038Mixin.perform @ build.js:22192ReactDefaultBatchingStrategy.batchedUpdates @ build.js:13370batchedUpdates @ build.js:20363ReactEventListener.dispatchEvent @ build.js:15132

这是我正在使用的依赖项

"dependencies": {
    "bootstrap": "^3.3.0",

    "flux": "^2.1.1",
    "jwt-decode": "^1.1.0",
    "react": "^0.13.3",
    "react-mixin": "^1.1.0",
    "react-router": "^0.13.2",
    "reqwest": "^1.1.5",
    "when"   :"^3.7.2"
  },
  "devDepedencies":{
    "babelify": "^6.1.0",
    "browser-sync": "^2.1.6",
    "browserify": "^8.0.3",
    "clean-css": "^3.1.9",
    "eslint": "^0.14.1",
    "rework": "^1.0.1",
    "rework-npm": "^1.0.0",
    "rework-npm-cli": "^0.1.1",
    "serve": "^1.4.0",
    "uglify-js": "^2.4.15",
    "watchify": "^2.1.1"
  }

来自 node_modules\flux\dist\Flux.js 的调度程序代码

var Dispatcher = (function () {
      function Dispatcher() {
        _classCallCheck(this, Dispatcher);

        this._callbacks = {};
        this._isDispatching = false;
        this._isHandled = {};
        this._isPending = {};
        this._lastID = 1;
      }

      /**
       * Registers a callback to be invoked with every dispatched payload. Returns
       * a token that can be used with `waitFor()`.
       */

      Dispatcher.prototype.register = function register(callback) {
        var id = _prefix + this._lastID++;
        this._callbacks[id] = callback;
        return id;
      };

      /**
       * Removes a callback based on its token.
       */

      Dispatcher.prototype.unregister = function unregister(id) {
        !this._callbacks[id] ?  true ? invariant(false, 'Dispatcher.unregister(...): `%s` does not map to a registered callback.', id) : invariant(false) : undefined;
        delete this._callbacks[id];
      };

      /**
       * Waits for the callbacks specified to be invoked before continuing execution
       * of the current callback. This method should only be used by a callback in
       * response to a dispatched payload.
       */

      Dispatcher.prototype.waitFor = function waitFor(ids) {
        !this._isDispatching ?  true ? invariant(false, 'Dispatcher.waitFor(...): Must be invoked while dispatching.') : invariant(false) : undefined;
        for (var ii = 0; ii < ids.length; ii++) {
          var id = ids[ii];
          if (this._isPending[id]) {
            !this._isHandled[id] ?  true ? invariant(false, 'Dispatcher.waitFor(...): Circular dependency detected while ' + 'waiting for `%s`.', id) : invariant(false) : undefined;
            continue;
          }
          !this._callbacks[id] ?  true ? invariant(false, 'Dispatcher.waitFor(...): `%s` does not map to a registered callback.', id) : invariant(false) : undefined;
          this._invokeCallback(id);
        }
      };

      /**
       * Dispatches a payload to all registered callbacks.
       */

      Dispatcher.prototype.dispatch = function dispatch(payload) {
        !!this._isDispatching ?  true ? invariant(false, 'Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.') : invariant(false) : undefined;
        this._startDispatching(payload);
        try {
          for (var id in this._callbacks) {
            if (this._isPending[id]) {
              continue;
            }
            this._invokeCallback(id);
          }
        } finally {
          this._stopDispatching();
        }
      };

      /**
       * Is this Dispatcher currently dispatching.
       */

      Dispatcher.prototype.isDispatching = function isDispatching() {
        return this._isDispatching;
      };

      /**
       * Call the callback stored with the given id. Also do some internal
       * bookkeeping.
       *
       * @internal
       */

      Dispatcher.prototype._invokeCallback = function _invokeCallback(id) {
        this._isPending[id] = true;
        this._callbacks[id](this._pendingPayload);
        this._isHandled[id] = true;
      };

      /**
       * Set up bookkeeping needed when dispatching.
       *
       * @internal
       */

      Dispatcher.prototype._startDispatching = function _startDispatching(payload) {
        for (var id in this._callbacks) {
          this._isPending[id] = false;
          this._isHandled[id] = false;
        }
        this._pendingPayload = payload;
        this._isDispatching = true;
      };

      /**
       * Clear bookkeeping used for dispatching.
       *
       * @internal
       */

      Dispatcher.prototype._stopDispatching = function _stopDispatching() {
        delete this._pendingPayload;
        this._isDispatching = false;
      };

      return Dispatcher;
    })();

当我尝试调试时，我在 this._callbacks 中有 4 个元素

{ “ID_1”：未定义， “ID_2”：未定义， “ID_3”：未定义， “ID_4”：未定义， }

并且 this.pendingPayload 是一个具有适当值的对象。 _callbacks 中的值如何未定义并因此导致错误。

谢谢

Answer 1

我能够解决问题。在我的 BaseStore 中，我添加了以下方法。

 subscribe(actionSubscribe) {
    this._dispatchToken = AppDispatcher.register(actionSubscribe());
  }

在我扩展 BaseStore 的商店中

我有以下

 constructor() {
        console.log('In SectionStore.constructor() :[]');
        super();
        this.subscribe(() => this._registerToActions.bind(this));
 }

非常感谢 Pcriulan 的帮助。