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源代碼，我認爲應該工作。您也可以省略第二個「CHANGE」參數到emitChange和addChangeListener，它將使用默認值。我認爲這是你在各地使用的商店的同一個實例？

看着Tuxx，他們使用createOwnerClass和connectOwnerToStore組合使所有這些都自動發生 - 請參見主頁上的initial guide。也許使用這種方法可以幫助你追蹤錯誤？