2

我最近升级到 React v 16.5 并且我的一些组件遇到了问题。我在下面展示了其中一个在 16.4.1 之前使用过的。这是一个简单的下载图标，当状态 isOpen 为 true 时会呈现一个下拉菜单，如果您在其外部单击，它将关闭其下拉菜单。

我不断收到

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

堆栈跟踪指向this.setState({ isOpen: false })in this.handleOutsideClick。我很困惑，因为我安装了日志，尽管 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>
    );
  }

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

4

0 回答 0