javascript - React，无法在发出更改时设置自动更新

Question

这是我的组件类(其中一部分)。

updateStore: function() {
  console.log("Updating state in the Calendar.js");
  this.setState(this.getInitialState());
},

componentDidMount: function() {
  EventsStore.addChangeListener(this.updateStore, 'CHANGE');
},

componentDidUnmount: function() {
  EventStore.removeChangeListener(this.updateStore);
},

这是我的行动(Tuxx)

var Actions = require('tuxx/Actions');
var eventsStore = require('../Stores/EventsStore');
var jQ = require('jquery');

var eventsActions = Actions.createActionCategory({
  category: 'events',
  source: 'standard',
  actions: ['create', 'get']
});

eventsActions.register(eventsStore, {
  create: eventsStore.onCreate,
   get: eventsStore.onGet
});

eventsActions.before('get', function (nextCallback, actionBody) {
  jQ.get('http://127.0.0.1:8181/events').done(function(resp) {
    nextCallback(resp);
  });
});

module.exports = eventsActions;

这是我商店的一部分

onGet: function(resp) {
    resp = JSON.parse(resp);
    this._events = resp;

    console.log(this._events);
    console.log("Emiting change")
    this.emitChange('CHANGE');
},

最后，这是我的初始化代码:

eventsAction.get();

var App = React.createClass({
  render: function() {
    return (
        <div>
            <RouteHandler />
        </div>
    )
  } 
});

var routes = (
  <Route name="app" path="/" handler={App}>
    <DefaultRoute handler={Calendar} />
    <Route name="event.edit" path="/event/:eventId" handler=    {EventEditForm} />
  </Route>
);

Router.run(routes, function(Handler) {
  React.render(<Handler />, document.getElementById("main"));
});

据我所知，它应该在运行emitChange时重新渲染我的组件。

这是我的控制台输出:

我认为它应该击中

    console.log("Updating state in the Calendar.js");

部分，但事实并非如此。

我在 JS 领域还远远不够，所以我需要帮助。

提前谢谢您。

这就是商店的需求:

var EventsStore = require('./Stores/EventsStore');

商店保存如下:

商店定义为:

var Stores = require('tuxx/Stores')

var eventsStore = Stores.createStore({
    _events: [],

    getAll: function () {
        return Object.keys(this._events);
    },

(...)
(...)

   onGet: function(resp) {
      resp = JSON.parse(resp);
      this._events = resp;

      console.log(this._events);
      console.log("Emiting change")
      this.emitChange();
  },

  register: function () {
      return {
          events: {
              create: this.onCreate,
              get: this.onGet
          }
      };
  }
  });

  module.exports = eventsStore;

在组件中，我使用它创建的 EventsStore 变量:

    var EventsStore = require('./Stores/EventsStore');

第二次编辑。我仍在挖掘，我发现了这一点:

componentDidMount: function() {
  EventsStore.addChangeListener(this.updateStore);
  console.log('Calendar::componentDidMount');
  console.log(EventsStore.listeners());
  console.log('----')
},

控制台的结果是:

[Log] Calendar::componentDidMount (app.js, line 36083)
[Log] [] (app.js, line 36084)

Answer 1

看过 Tuxx 源代码后，我相信应该可以工作。您还可以省略 emitChange 和 addChangeListener 的第二个“CHANGE”参数，它将使用默认值。我认为这是您在任何地方使用的商店的同一个实例？

看看 Tuxx，他们使用 createOwnerClass 和 connectOwnerToStore 组合来使所有这一切自动发生 - 请参阅 initial guide在主页上。也许使用这种方法可以帮助您追踪错误？