'this' 在 Reflux.createStore() 中未定义

Question

我试图在我的 Reflux 商店中通过 this 设置状态属性，但每当我尝试设置属性时，我都会收到以下错误：

Uncaught TypeError: Cannot read property 'triggers' of undefined

我使用 Babel 来编译我的 JSX，所以不确定这是否是问题所在，但我非常怀疑。

import Reflux from 'reflux';

import BoardActions from '../actions/BoardActions';

const BoardStore = Reflux.createStore({
  listenables: [BoardActions],
  getInitialState: () => {
    return {
      boards: []
    };
  },
  init: (state = undefined) => {
    if (state) {
      this.state = state;
    }

    this.triggers(this.state);        <-----     Getting the error here
    // this.state = { boards: [] };   <-----     This would also fail
  },

  ...

});

这是 BoardActions：

import Reflux from 'reflux';

import BoardSource from '../sources/BoardSource';

const BoardActions = Reflux.createActions({
  'fetch': { children: ['fetching', 'completed', 'failed'] }
});

BoardActions.fetch.listen(() => {
  BoardSource.fetch().then((data) => {
    BoardActions.fetch.completed(data);
  });
});

export default BoardActions;

谢谢！

更新

我可以看到编译器正在将编译后的代码中的this转换为undefined，如下所示：

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _reflux = require('reflux');

var _reflux2 = _interopRequireDefault(_reflux);

var _BoardActions = require('../actions/BoardActions');

var _BoardActions2 = _interopRequireDefault(_BoardActions);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var BoardStore = _reflux2.default.createStore({
  listenables: [_BoardActions2.default],
  init: function init() {
    undefined.test = 'test';
  },
  onFetch: function onFetch() {},
  onFetchFetching: function onFetchFetching() {},
  onFetchCompleted: function onFetchCompleted(boards) {
    undefined.boards = boards;
    undefined.trigger(undefined.boards);
  },
  onFetchFailed: function onFetchFailed() {}
});

exports.default = BoardStore;
//# sourceMappingURL=BoardStore.js.map

但仍然不知道为什么它会将 this 转译为 undefined。

Answer 1

因为您使用箭头函数来定义对象的方法（对于您传递给 Reflux.createStore 的方法）。

在箭头函数中 this 是词法范围的，这意味着，在您的问题的上下文中，它是 undefined，因为它在词法上绑定到包含模块（无论是什么） .

参见 Babel online editor 中的示例。

查看 further explanation 个案的更多信息。

注意：我假设您熟悉基础知识，否则 here 是一本关于 ES6 的好书中的好文章的link。

Answer 2

问题似乎是由使用箭头函数引起的。

这应该有效：

const BoardStore = Reflux.createStore({

  ...

  init(state = undefined) {
    if (state) {
      this.state = state;
    }
    this.triggers(this.state);
    // this.state = { boards: [] };
  },

  ...

});

'this' 在 Reflux.createStore() 中未定义

'this' undefined in Reflux.createStore()

javascript

reactjs

reactjs-flux

refluxjs

relayjs

更新