Reactでフェッチエラーをキャッチする正しい方法は？私はシンプルで、このように見える部品に反応している

Question

：

class Test extends React.Component { 
    componentDidMount() { 
    fetch('/some-url-here') 
     .then((data) => { 
     this.setState({ data }); 
     }) 
     .catch(() => { 
     alert('failed to fetch'); 
     }); 
    } 

    render() { 
    // render the data here 
    } 
} 

をこれに伴う問題はcatchだけでエラーをフェッチキャッチしていないということです。 renderにスローされた例外もキャッチします！いくつかのデータを取り出してフェッチ・エラーを処理する単純なコンポーネントを作成する正しい方法は何でしょうか？

Answer 1

class Test extends React.Component { 
    componentDidMount() { 
    fetch('/some-url-here') 
     .then((data) => { 
     this.setState({ data }); 
     }, (error) => { 
     if (error) { 
      // handle error here 
     } 
     }); 
    } 

    render() { 
    // render the data here 
    } 
} 

2番目のコールバックの代わりにキャッチを使用すると、setStateメソッドで発生した可能性のあるエラーは処理されません。レンダリングメソッドのエラーを独自の方法で取り込むことができます。 詳細については、Dan Abramovのこのツイートを読んでください。

Dan's Tweet

Answer 2

あなたが16以降に反応している場合は、エラー境界とcomponentDidCatchを使用することを検討してください。あなたを助けるかもしれない

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

    componentDidCatch(error, info) { 
    // Display fallback UI 
    this.setState({ hasError: true }); 
    // You can also log the error to an error reporting service 
    logErrorToMyService(error, info); 
    } 

    render() { 
    if (this.state.hasError) { 
     // You can render any custom fallback UI 
     return <h1>Something went wrong.</h1>; 
    } 
    return this.props.children; 
    } 
} 

// Then you can use it as a regular component: 

<ErrorBoundary> 
    <MyWidget /> 
</ErrorBoundary> 

良いリソース：ダン・アブラモフ監督のブログから例

• https://hackernoon.com/error-boundaries-in-react-16-32fb8e185a3
• https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html
• https://medium.com/@sgroff04/2-minutes-to-learn-react-16s-componentdidcatch-lifecycle-method-d1a69a1f753