zoukankan      html  css  js  c++  java
  • [React] Handle React Suspense Errors with an Error Boundary

    Error Boundaries are the way you handle errors with React, and Suspense embraces this completely. Let's take a look at how to handle asynchronous errors with Suspense and Error Boundaries.

    In previous post, we used React.Suspense with fallback (for loading..), in this post, we will see how to handle error case with ErrorBoundary. https://reactjs.org/docs/error-boundaries.html

    NPM module: https://npm.im/react-error-boundary

    An ErrorBoundary component:

    // utils.js
    
    class ErrorBoundary extends React.Component {
      state = {error: null}
      static getDerivedStateFromError(error) {
        return {error}
      }
      componentDidCatch() {
        // log the error to the server
      }
      tryAgain = () => this.setState({error: null})
      render() {
        return this.state.error ? (
          <div>
            There was an error. <button onClick={this.tryAgain}>try again</button>
            <pre style={{whiteSpace: 'normal'}}>{this.state.error.message}</pre>
          </div>
        ) : (
          this.props.children
        )
      }
    }

    ---

    import React from 'react'
    import fetchPokemon from '../fetch-pokemon'
    import {PokemonDataView, ErrorBoundary} from '../utils'
    
    let pokemon
    let pokemonError
    let pokemonPromise = fetchPokemon('pikachue').then(
      p => {
        console.log('promise resolve')
        pokemon = p
      },
      e => {
        pokemonError = e
      },
    )
    
    function PokemonInfo() {
      console.log('PokemonInfo init')
    
      if (pokemonError) {
        throw pokemonError
      }
    
      if (!pokemon) {
        throw pokemonPromise // this API might change
      }
    
      return (
        <div>
          <div className="pokemon-info__img-wrapper">
            <img src={pokemon.image} alt={pokemon.name} />
          </div>
          <PokemonDataView pokemon={pokemon} />
        </div>
      )
    }
    
    function App() {
      return (
        <div className="pokemon-info">
          <ErrorBoundary>
            <React.Suspense
              fallback={
                console.log('loading pokemon...') && <div>Loading pokemon...</div>
              }
            >
              <PokemonInfo />
            </React.Suspense>
          </ErrorBoundary>
        </div>
      )
    }
    
    export default App
  • 相关阅读:
    Construction构造函数
    映射验证
    映射设置
    条件映射
    映射前和映射后的操作
    AutoMapper 5.0-升级指南
    Bootstrap Tree View
    MiniProfiler使用笔记
    关于添加数据自定义编号格式问题
    【Postgresql】数据库函数
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12006526.html
Copyright © 2011-2022 走看看