如何正确更新组件？(react+flux)

Question

我正在使用 ReactJs + 助焊剂。在我的商店中，我有一个方法 - getCurrentEvents(key)。它接收密钥并正确创建对象数组。之后它发出变化。我有组件列表，其中有处理程序。此处理程序响应存储更改并调用方法 displayEvents()。此方法更新组件的状态。这个概念有效但不正确。当我调用 getCurrentEvents(key) 它开始更新 EventList-component 并且不会停止，因此浏览器中的选项卡 freezes.As 我知道我得到了无限更新周期之类的东西，我认为出了点问题在组件的方法中，但我不明白错误在哪里。如何修复此错误？

商店代码：

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) 函数发出 'change' 触发 displayEvents...调用 getCurrentEvents(key)...发出 'change' 调用 displayEvents...

的事件

如何正确更新组件？(react+flux)

How to update component correctly?(react+flux)

reactjs

flux

reactjs-flux