componentDidCatch не вызывается, когда есть ошибка в обещании

Question

Согласно новому документу " Реакция 16-го выпуска"

"React 16 печатает все ошибки, которые произошли во время рендеринга, на консоли в процессе разработки, даже если приложение случайно их проглатывает".

У меня есть родительский компонент и дочерний компонент. Я вызвал ошибку в блоке обещаний. Но это вызовет метод catch обещания, компонент DidCatch родительского объекта не вызывается. Я не уверен, является ли это ожидаемым поведением.

Вот jsfiddle https://jsfiddle.net/john1jan/Luktwrdm/14/

class Parent extends React.Component {  
  constructor(props){
    super(props);
    this.state={hasError:false}
  }

  render() {
    if(this.state.hasError){
      return <div>Something went wrong</div>
    }

    return (
      <div>
        <h1>I am parent</h1>
        <Child></Child>
      </div>
    );
  }
  componentDidCatch(error,errorInfo){
    this.setState({
      hasError:true
    })
  }
}

class Child extends React.Component {

  render() {
    return (
      <div>
        <h1>I am child</h1>
      </div>
    );
  }

  componentDidMount(){
    fetch("https://jsonplaceholder.typicode.com/posts").then((response) => {
      throw new Error("I am the error in promise");
    }).catch((error)=>{
      console.log("Error caught in catch",error);
    })
    ;
  }
}

ReactDOM.render(<Parent name="world"/>, 
document.getElementById('container'));

Answer 1

Просто хочу указать на любого, кто приходит на этот вопрос в поисках ответа.

React 16 печатает все ошибки, возникшие во время рендеринга, на консоли в процессе разработки, даже если приложение случайно их проглотит.

componentDidCatch сработает только в методах жизненного цикла рендеринга.

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

Answer 2

Вы перехватываете ошибку, и возвращение перехвата - это обещание, поэтому у вас больше нет ошибки, если вы удалите.catch для своей выборки в componentDidMount, это должно работать!