如何正確更新組件？（反應+通量）

Question

我正在使用ReactJs +通量。在我的商店我有一個方法 - getCurrentEvents(key)。它接收密鑰並正確創建對象數組。之後它發佈變化。 我有組件列表，它有處理程序。該處理程序應答存儲更改並調用方法displayEvents()。此方法更新組件的狀態。這個概念有效，但不正確。當我打電話給getCurrentEvents(key)它開始更新EventList-component並且不停止，因此瀏覽器中的標籤凍結。據我所知，我得到了無限循環的更新，我認爲組件的方法有問題，但我無法理解錯誤在哪裏？如何解決這個錯誤？

存儲代碼：

class EventStore extends EventEmitter { 
    constructor() { 
    super(); 
    this.events = [{ 
     id: 1, 
     title: 'title 1', 
     date: '2017-04-11 09:14:01' 
     }, { 
     id: 2, 
     title: 'title 2', 
     date: '2017-04-11 09:24:01' 
     }, { 
     id: 3, 
     title: 'title 3', 
     date: '2017-04-12 09:14:01' 
     }, { 
     id: 4, 
     title: 'title 4', 
     date: '2017-11-12 19:14:01' 
     }, { 
     id: 5, 
     title: 'title 5', 
     date: '2017-06-13 19:00:01' 
     } 
    ]; 
    } 

    getCurrentEvents(key) { 
    var currentEvents = []; 
    for (event in this.events){ 
     if (this.events[event].date.includes(key)) { 
      currentEvents.push(this.events[event]); 
     } 
    } 

    return currentEvents; 
    this.emit("change"); 
    } 

    createEvent(new_event) { 
    this.events.push ({ 
     title: new_event.title, 
     date: new_event.date 
    }) 
    this.emit("change"); 
    } 

    getAll() { 
    return this.events 
    } 


    handleActions(action) { 
    switch(action.type) { 
     case 'CREATE_EVENT' : { 
     this.createEvent(action.new_event); 
     } 
     case 'DISPLAY_CURRENT_EVENTS' : { 
     this.getCurrentEvents(action.key); 
     } 
    } 
    } 
} 

const eventStore = new EventStore; 

dispatcher.register(eventStore.handleActions.bind(eventStore)) 

export default eventStore; 

EVENTLIST組件代碼：

export default class EventList extends React.Component { 

     constructor() { 
     super(); 
     this.state = { 
      events: EventStore.getCurrentEvents() 
     }; 
     this.displayEvents = this.displayEvents.bind(this); 
     } 

     componentWillMount() { 
     EventStore.on("change", this.displayEvents) 
     } 

     displayEvents() { 

     this.setState ({ 
       events: EventStore.getCurrentEvents() 
     }) 
     } 

     render() { 
     console.log('form events LIST', this.state) 

     const events = this.state.events ; 
     var EventsList = []; 

     for (event in events) { 
      EventsList.push(
      <li key={events[event].id} id={events[event].id}> 
       {events[event].title} , {events[event].date} 
      </li> 
      ) 
     } 
     return (
     <div className=""> 
      <h3> Events on this day </h3> 

      <ul className="event-list-wrapper"> 
      {EventsList} 
      </ul> 
     </div> 
     ); 
     } 
} 

Answer 1

看起來它是因爲getCurrentEvents(key)功能是發射裝置，觸發displayEvents一個 '變' ......這就要求getCurrentEvents(key) ..發出'更改'事件，其中調用displayEvents ...