Реактивные компоненты не монтируются - PullRequest
Новая
       29

Реактивные компоненты не монтируются

0 голосов
/ 26 сентября 2018

Я недавно обновился до React v 16.5, и у меня возникают проблемы с некоторыми из моих компонентов.Я показываю один из них ниже, который используется для работы до 16.4.1.Это простой значок загрузки, который отображает раскрывающийся список, когда состояние isOpen имеет значение true, и закрывает его, если вы щелкаете за его пределами.

Я продолжаю получать

Невозможно позвонитьsetState для компонента, который еще не смонтирован.Это не работает, но это может указывать на ошибку в вашем приложении.Вместо этого присвойте this.state напрямую или определите свойство класса state = {}; с требуемым состоянием в компоненте DownloadIcon.

Трассировка стека указывает на this.setState({ isOpen: false }) в this.handleOutsideClick.Я в замешательстве, потому что я монтирую логи, хотя isMounting (который я только что добавил для целей отладки) на самом деле не устанавливается в 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>
    );
  }

Когда я нажимаю значок загрузки сейчас, консоль выдает предупреждениеи не может отобразить выпадающий список.Любая помощь будет благодарна за то, почему это предупреждение продолжает появляться и почему оно может нарушать функциональность!

...