我似乎无法使用组件将卸载可靠地删除侦听器

我在窗口中添加了一个侦听器来检测onClickOutside类型的场景(具体来说，在菜单外部单击时折叠菜单(。这是包含相关代码的组件：

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import LinkedStateMixin from 'react-addons-linked-state-mixin';
import styles from './DescriptiveSelect.css';
import classNames from 'classnames';
import _ from 'underscore';
export default class DescriptiveSelect extends Component {
    static propTypes = {
        attrForOptionLabel: PropTypes.string,
        attrForOptionValue: PropTypes.string,
        children: PropTypes.string,
        className: PropTypes.string,
        disabled: PropTypes.bool,
        nullLabel: PropTypes.string,
        onUpdate: PropTypes.func,
        options: PropTypes.array,
        selectedLabel: PropTypes.string,
        selectedOption: PropTypes.number,
        valueLink: PropTypes.object
    }
    mixins: [LinkedStateMixin]
    static defaultProps = {
        attrForOptionLabel: 'name',
        attrForOptionValue: 'id',
        disabled: false,
        selectedOption: 0,
        selectedLabel: 'Select one…'
    }
    state = {
        isOpen: false,
        options: []
    }
    componentDidMount() {
        this.buildOptions(this.props.options);
        window.addEventListener('click', this.onDocumentClick.bind(this));
    }
    componentWillUnmount() {
        window.removeEventListener('click', this.onDocumentClick);
    }
    onDocumentClick(event) {
        const theLabel = ReactDOM.findDOMNode(this);
        if (theLabel && theLabel.contains(event.target)) {
            this.setState({isOpen: !this.state.isOpen});
        } else {
            this.setState({isOpen: false});
        }
        event.preventDefault();
    }
    handleSelection(option) {
        if (this.props.onUpdate) {
            this.props.onUpdate(option.id);
        }
        this.setState({'isOpen': false});
    }
    /**
     * Build out <select> menu options
     * Data must be formatted with the following attributes:
     *     const theData = [
     *         {
     *             id: 1,
     *             sequence: 0,
     *             short_name: 'App'
     *         }
     *     ];
     * @param  {array} data The data to convert, either from an endpoint
     *                      response or passed in via the `options` prop.
     */
    buildOptions(data) {
        const _this = this;
        const results = data;
        const resultLength = results.length;
        const {
            attrForOptionValue,
            attrForOptionLabel
        } = this.props;
        // Sort data by sequence attribute
        _.sortBy(results, 'sequence');
        // Cycle through JSON results and create <option> elements
        for (let i = 0; i < resultLength; i++) {
            const option = results[i];
            _this.state.options.push(
                <option key={option.id} value={option[attrForOptionValue]}>{option[attrForOptionLabel]}</option>
            );
            _this.forceUpdate();
        }
    }
    render() {
        const {
            className,
            nullLabel,
            options
        } = this.props;
        // Classes for select menu
        const selectClasses = classNames({
            [styles.LabelWrapper]: true,
            [className]: className
        });
        /**
         * Contents of the custom select.
         * Taken from the `options` prop that should be passed in.
         */
        const optionNodes = options.map((option) => {
            return (
                <li className={styles.Option} key={option.id} onClick={this.handleSelection.bind(this, option)}>
                    <div className={styles.OptionLabel}>a <strong>{option.name}</strong></div>
                    <div className={styles.OptionDetail}>{option.description}</div>
                </li>
            );
        });
        return (
            <label className={selectClasses} ref="theLabel">
                <select
                    className={styles.Select}
                    nullLabel={nullLabel}
                    options={options}
                    ref="theSelect"
                    valueLink={this.props.valueLink}
                >
                    { nullLabel ? <option value="">{nullLabel}</option> : null }
                    { this.state.options }
                </select>
                { this.state.isOpen ? <div className={styles.Menu}>
                    <ul className={styles.OptionsWrapper}>
                        {optionNodes}
                    </ul>
                    <footer className={styles.Footer}>
                        <p><a href="#">Learn more</a> about App.typography titles.</p>
                    </footer>
                </div> : null }
            </label>
        );
    }
}

我不确定为什么，但它实际上并没有删除侦听器，所以我最终在控制台中得到了其中几个：

未捕获的错误：不变冲突：在 已卸载的组件。

此代码中是否有任何可能导致问题的明显内容？