反应组件未安装

我最近升级到React v 16.5并且一直在解决我的一些组件问题 . 我在16.4.1之前展示了其中一个用于工作的东西 . 这是一个简单的下载图标，当状态isOpen为true时呈现下拉列表，如果您在其外部单击，则会关闭其下拉列表 .

我一直在接受

无法在尚未装入的组件上调用setState . 这是一个无操作，但它可能表示您的应用程序中存在错误 . 相反，直接分配给this.state或定义state = {}; DownloadIcon组件中具有所需状态的类属性 .

堆栈跟踪指向 this.handleOutsideClick 中的 this.setState({ isOpen: false }) . 我很困惑因为我MOUNT日志虽然isMounted（我刚刚为调试目的添加）实际上并没有设置为true .

class DownloadIcon extends React.Component {


static propTypes = {
    chartPanelEl: PropTypes.any,
    metricId: PropTypes.string,
    datasets: PropTypes.array,
    downloadFormats: PropTypes.array,
    metadata: PropTypes.any,
    tableHeaders: PropTypes.array,
    segments: PropTypes.array
  };

  state = {
    isOpen: false,
    isMounted: false // for debugging purposes
  };

  dom = React.createRef();

  componentDidMount() {
    console.log("I MOUNT"); // logs
    this.setState({ isMounted: true });
    window.addEventListener("click", this.handleOutsideClick, true);
  }

  componentWillUnmount() {
    window.removeEventListener("click", this.handleOutsideClick, true);
  }

  /**
   * Click listener to determine state of dropdown
   * @param {Object} e - event object
   */
  handleOutsideClick = e => {
    const target = e.target;
    const validTargets = [this.dom.current].concat(
      ...this.dom.current.children
    );

    if (this.dom && this.dom.current && validTargets.includes(target)) {
      return;
    }

    this.setState({
      isOpen: false
    });
  };

  /**
   * Handle click of download icon container to set open state
   * @param {Object} e - event object
   */
  handleClick = e => {
    this.setState({ isOpen: !this.state.isOpen });
  };

  render() {
    const dropdownClassNames = "dropdown " + (this.state.isOpen ? "open" : "");

    return (
      <div
        className="download-icon__container"
        onClick={this.handleClick}
        ref={this.dom}
      >
        <img className="download-icon" src={downloadIcon} />
        <div className={dropdownClassNames}>
          <div
            id="drop"
            data-toggle="dropdown"
            role="button"
            aria-haspopup="true"
            aria-expanded="false"
            href="#"
          />
          <ul id="menu1" className="dropdown-menu" aria-labelledby="drop">
            <li className="dropdown-title">Download as</li>
            {this.renderDownloadOptions()}
          </ul>
        </div>
      </div>
    );
  }

当我现在单击下载图标时，控制台会抛出警告并无法呈现下拉列表 . 任何帮助将不胜感激为什么这个警告不断出现以及为什么它可能会破坏功能！