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创作者Josh Perez帮助清除了这个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;

React unlisten对componentWillUnmount不起作用

1 个答案: