Реагировать - setState () на несмонтированный компонент

Вопрос в том, почему я получаю эту ошибку, когда компонент уже должен быть установлен (поскольку он вызывается из componentDidMount), я думал, что безопасно устанавливать состояние после монтирования компонента?

Он не вызывается из componentDidMount. Ваш componentDidMount создает функцию обратного вызова, которая будет выполняться в стеке обработчика таймера, а не в стеке componentDidMount. По-видимому, к моменту, когда ваш обратный вызов (this.loadSearches) будет выполнен, компонент отключился.

Таким образом, принятый ответ защитит вас. Если вы используете какой-либо другой асинхронный API, который не позволяет отменить асинхронные функции (уже переданные некоторым обработчикам), вы можете сделать следующее:

if (this.isMounted())
     this.setState(...

Это избавит вас от сообщения об ошибке, которое вы сообщаете во всех случаях, хотя оно действительно похоже на подметание под ковриком, особенно если ваш API предоставляет возможность отмены (как setInterval делает с clearInterval).

Кому нужна другая опция, метод обратного вызова атрибута ref может быть обходным путем. Параметр handleRef является ссылкой на элемент DOM div.

Для получения подробной информации о ссылках и DOM: https://facebook.github.io/react/docs/refs-and-the-dom.html

handleRef = (divElement) => {
 if(divElement){
  //set state here
 }
}

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

Для потомков

Эта ошибка в нашем случае была связана с Reflux, обратными вызовами, перенаправлениями и setState. Мы отправили setState на обратный вызов onDone, но мы также отправили перенаправление на обратный вызов onSuccess. В случае успеха наш обратный вызов onSuccess выполняется до onDone. Этот вызывает перенаправление перед попыткой setState. Таким образом, ошибка, setState на немонтированном компоненте.

Действие хранилища рефлекса:

generateWorkflow: function(
    workflowTemplate,
    trackingNumber,
    done,
    onSuccess,
    onFail)
{...

Вызов перед исправлением:

Actions.generateWorkflow(
    values.workflowTemplate,
    values.number,
    this.setLoading.bind(this, false),
    this.successRedirect
);

Вызов после исправления:

Actions.generateWorkflow(
    values.workflowTemplate,
    values.number,
    null,
    this.successRedirect,
    this.setLoading.bind(this, false)
);

Подробнее

В некоторых случаях, поскольку React isMounted является "устаревшим/анти-шаблоном", мы приняли использование переменной _mounted и сами ее контролируем.

class myClass extends Component {
  _isMounted = false;

  constructor(props) {
    super(props);

    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    this._isMounted = true;
    this._getData();
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  _getData() {
    axios.get('https://example.com')
      .then(data => {
        if (this._isMounted) {
          this.setState({ data })
        }
      });
  }


  render() {
    ...
  }
}