Блог

Небольшая проблема — не уверен, как справиться с остановкой дочернего элемента от обновления после того, как его родительский элемент был размонтирован.

В настоящее время у меня есть «представление» (родительское) с вложенным компонентом текстового поля.

Мой компонент текстового поля реализует ввод с помощью onBlur

 <input type={this.props.type} name={this.props.name} onBlur={this.handleBlur} ... />
  

Две функции в компоненте TextField

 hideClear: function () {
    // to prevent clear button from disappearing when clicking on it
    if (!this.state.keepFocus) {
        this.setState({inFocus: false});
    }
},
handleBlur: function (e) {
    e.preventDefault();
    this.setState({keepFocus: false});
    window.setTimeout(this.hideClear, 200);
},
  

Теперь, когда мой родитель размонтируется, пока мое поле ввода имеет фокус, я возвращаюсь

Предупреждение: setState(…): может обновлять только смонтированный или монтируемый компонент. Обычно это означает, что вы вызвали setState() для размонтированного компонента. Это не операция. Пожалуйста, проверьте код компонента TextField.

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

Спасибо 🙂

Как указано в ошибке, вы пытаетесь обновить состояние компонента, когда компонент уже размонтирован, это связано с таймером, который у вас есть в handlerBlur() функции.

Я хотел бы думать, я не так уверен, но всякий раз, когда компонент размонтируется, ввод теряет фокус, и поэтому onBlur событие запускается запуском вашей handleBlur() функции, таким образом устанавливая таймер setTimeout для существенного обновления состояния компонента после того, как он уже был размонтирован, через hideClear() функцию.

Оптимальным решением было бы найти места, где setState() может вызываться после размонтирования компонента, и исправить их. Такие ситуации чаще всего возникают из-за обратных вызовов, когда компонент ожидает получения некоторых данных и размонтируется до поступления данных. В идеале любые обратные вызовы должны быть отменены в componentWillUnmount перед размонтированием.

Приведенная выше цитата была извлечена из блога разработчика React.

Быстрый способ исправить это — сохранить идентификатор таймера в переменной экземпляра, чтобы позже очистить таймер window.clearTimeout , когда компонент должен быть размонтирован.

 var MyComponent = React.createClass({

  timerId = 0,

  ...

  handleBlur: function (e) {
    e.preventDefault();
    this.setState({keepFocus: false});
    this.timerId = window.setTimeout(this.hideClear, 200);
  },

  componentWillUnmount: function() {
    if (this.timerId) 
      window.clearTimeout(this.timerId);
  },

  ...

}