Есть ли способ проверить, отключен ли компонент реагирования?

Ответ 1

Поскольку isMounted() официально устарела, вы можете сделать это в своем компоненте:

componentDidMount() { 
  this._ismounted = true;
}

componentWillUnmount() {
   this._ismounted = false;
}

Этот способ поддержки собственной переменной state подробно описан в документации ReactJS: isMounting - это Antipattern.

Ответ 2

Я думаю, что ответ Shubham - это обходное решение, предложенное для реагирования на людей, которым необходимо перевести свой код, чтобы прекратить использование анти-шаблона isMounted.

Это не обязательно плохо, но стоит перечислять реальные решения этой проблемы.

Статья, связанная с Shubham предлагает 2 предложения, чтобы избежать этого анти-шаблона. Тот, который вам нужен, зависит от того, почему вы вызываете setState при размонтировании компонента.

если вы используете хранилище Flux в своем компоненте, вы должны отказаться от подписки в компонентеWillUnmount

class MyComponent extends React.Component {
  componentDidMount() {
    mydatastore.subscribe(this);
  }
  render() {
    ...
  }
  componentWillUnmount() {
    mydatastore.unsubscribe(this);
  }
}

Если вы используете ES6 promises, вам может потребоваться свернуть свое обещание, чтобы сделать его отмененным.

const cancelablePromise = makeCancelable(
  new Promise(r => component.setState({...}}))
);

cancelablePromise
  .promise
  .then(() => console.log('resolved'))
  .catch((reason) => console.log('isCanceled', reason.isCanceled));

cancelablePromise.cancel(); // Cancel the promise

Подробнее о makeCancelable в связанной статье.

В заключение не пытайтесь исправить эту проблему, установив переменные и проверяя, установлен ли компонент, перейдите в корень проблемы. Пожалуйста, прокомментируйте с другими распространенными случаями, если вы можете придумать что-нибудь.

Ответ 3

Другое решение будет использовать ссылки. Если вы используете React 16. 3+, сделайте ссылку на ваш элемент верхнего уровня в функции рендеринга.

Затем просто проверьте, является ли ref.current нулевым или нет.

Пример:

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    this.elementRef = React.createRef();
  }

  checkIfMounted() {
     return this.elementRef.current != null;
  }

  render() {
    return (
      <div ref={this.elementRef} />
    );
  }
}

Ответ 4

Я попал сюда, потому что искал способ остановить polling API.

ответная документация охватывает дело websocket, но не опросную.

То, как я обошел это

// React component

React.createClass({
    poll () {
        if (this.unmounted) {
            return
        }
        // otherwise, call the api
    }
    componentWillUnmount () {
        this.unmounted = true
    }
})

это работает. Надеюсь, это поможет

Пожалуйста, дайте мне знать, если вы, ребята, знаете какой-нибудь неудачный тестовый пример для этого =]

Ответ 5

Та же идея, но другая реализация

/**
 * component with async action within
 * 
 * @public
 */
class MyComponent extends Component {
    constructor ( ...args ) {
        // do not forget about super =)
        super(...args);
        // NOTE correct store "setState"
        let originSetState = this.setState.bind(this);
        // NOTE override
        this.setState = ( ...args ) => !this.isUnmounted&&originSetState(...args);
    }
    /**
     * no necessary setup flag on component mount
     * @public
     */
    componentWillUnmount() {
        // NOTE setup flag
        this.isUnmounted = true;
    }
    /**
     *
     * @public
     */
    myCustomAsyncAction () {
        // ... code
        this.setState({any: 'data'}); // do not care about component status
        // ... code
    }

    render () { /* ... */ }
}

Ответ 6

я обнаружил, что компонент будет размонтирован, сгенерируйте заполнение этого var

if(!this._calledComponentWillUnmount)this.setState({vars});

Ответ 7

Вы можете использовать:

myComponent.updater.isMounted(myComponent)

"myComponent" - это экземпляр вашего реагирующего компонента. это вернет 'true', если компонент смонтирован, и 'false', если его нет..

• Это не поддерживается способ сделать это. вам лучше отписаться от любых асинхронных событий на componentWillUnmount.