Реакция unlisten не работает на componentWillUnmount

Question

Я использую Alt с React 0.13.1. В моем компоненте ниже, unlisten не работает на componentWillUnmount,

Компонент отключается, но я вижу, что опрос все еще происходит. Есть ли что-то, что я не понимаю о том, как не слушать? У меня нет привязок, потому что React 0.13 включает в себя автоматическое связывание. Любая помощь будет принята с благодарностью.

'use strict';

import React from 'react';
import SitesList from './SitesList';
import SiteStore from '../stores/SiteStore';
import SiteActions from '../actions/SiteActions';

// Next line is necessary for exposing React to browser for
// the React Developer Tools: http://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html
// require("expose?React!react");

var SitesBox = React.createClass({
  displayName: 'SitesBox',

  propTypes: {
    url: React.PropTypes.string.isRequired,
    pollInterval: React.PropTypes.number.isRequired
  },

  getStoreState() {
    return {
      sites: SiteStore.getState()
    };
  },

  getInitialState() {
    return this.getStoreState();
  },

  componentDidMount() {
    SiteStore.listen(this.onChange);
    SiteActions.fetchSites(this.props.url, true);
    setInterval(SiteActions.fetchSites,
                this.props.pollInterval,
                this.props.url,
                false);
  },

  componentWillUnmount() {
    SiteStore.unlisten(this.onChange);
  },

  onChange() {
    this.setState(this.getStoreState());
  },

  render() {
    return (
      <div className="siteBox row">
        <div className="col-md-12">
          <div className="panel panel-inverse">
              <div className="panel-body">
                  <SitesList sites={this.state.sites.sites} />
              </div>
          </div>
        </div>
      </div>
    );
  }
});

export default SitesBox;

Answer 1

Отвечая на мой собственный вопрос. Unlisten не обрабатывает интервалы. Вы должны очистить clearInterval(), как показано ниже. Большое спасибо создателю alt Джошу Пересу за помощь в устранении этой проблемы React (не Alt).

'use strict';

import React from 'react';
import SitesList from './SitesList';
import SiteStore from '../stores/SiteStore';
import SiteActions from '../actions/SiteActions';

// Next line is necessary for exposing React to browser for
// the React Developer Tools: http://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html
// require("expose?React!react");

var SitesBox = React.createClass({
  displayName: 'SitesBox',
  sitesInterval: null,

  propTypes: {
    url: React.PropTypes.string.isRequired,
    pollInterval: React.PropTypes.number.isRequired
  },

  getStoreState() {
    return {
      sites: SiteStore.getState()
    };
  },

  getInitialState() {
    return this.getStoreState();
  },

  componentDidMount() {
    SiteStore.listen(this.onChange);
    SiteActions.fetchSites(this.props.url, true);
    this.sitesInterval = setInterval(SiteActions.fetchSites,
                this.props.pollInterval,
                this.props.url,
                false);
  },

  componentWillUnmount() {
    SiteStore.unlisten(this.onChange);
    clearInterval(this.sitesInterval);
  },

  onChange() {
    this.setState(this.getStoreState());
  },

  render() {
    return (
      <div className="siteBox row">
        <div className="col-md-12">
          <div className="panel panel-inverse">
              <div className="panel-body">
                  <SitesList sites={this.state.sites.sites} />
              </div>
          </div>
        </div>
      </div>
    );
  }
});

export default SitesBox;