React 进阶提高免费视频教程 #17 错误边界和生命周期函数 componentDidCatch

https://medium.com/@sgroff04/2-minutes-to-learn-react-16s-componentdidcatch-lifecycle-method-d1a69a1f753

https://medium.com/@blairanderson/react-v16-new-error-handler-example-d62499117bfa

https://blissful-khorana-41c490.netlify.com/

src/App.js

import React, { Component } from 'react';
import './App.css';
import Broken from './Broken';
import ErrorBoundary from './ErrorBoundary';

class App extends Component {
  state = {
    counter: 0
  }

  increment = () => {
    this.setState(prevState => ({ counter: prevState.counter + 1 }));
  }

  decrement = () => {
    this.setState(prevState => ({ counter: prevState.counter - 1 }));
  }

  render() {
    return (
      <div className="App">
        <h1>Hello rails365</h1>
        <ErrorBoundary render={ (error, errorInfo) => <p>Error: { error.toString() }</p> }>
          <Broken />
        </ErrorBoundary>

        <div>Counter: { this.state.counter }</div>
        <button onClick={ this.increment }>Increment</button>
        <button onClick={ this.decrement }>Decrement</button>
      </div>
    );
  }
}

export default App;

src/ErrorBoundary.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class ErrorBoundary extends Component {
  static propTypes = {
    children: PropTypes.oneOfType([
      PropTypes.node,
      PropTypes.arrayOf(PropTypes.node)
    ]).isRequired
  }

  state = {
    hasError: false,
    error: null,
    errorInfo: null
  }

  componentDidCatch(error, errorInfo) {
    this.setState({
      hasError: true,
      error: error,
      errorInfo: errorInfo
    })
  }

  render() {
    if (this.state.hasError) {
      return <div>{ this.props.render(this.state.error, this.state.errorInfo) }</div>
    }
    return this.props.children;
  }
}

export default ErrorBoundary;