コンポーネントを正しく更新するには？（react + flux）

Question

私はReactJs + fluxを使用しています。私の店では、私はメソッドを持っています - getCurrentEvents(key) .Itはキーを受け取り、オブジェクトの配列を正しく作成します。その後、それは変化を放出する。 私はハンドラを持つcomponent-listを持っています。このハンドラは、変更の保存と、メソッド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コンポーネントコード：getCurrentEvents(key)機能がgetCurrentEvents(key)を呼び出すdisplayEventsをトリガされた '変更' を...放出されるので、それはだよう

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

が見えます.. displayEvents ...