何时使用反应错误边界组件 (react use error boundary)

我们什么时候应该使用错误边界组件?只为缺少道具之类的东西?

我们什么时候应该使用错误边界组件?只为缺少道具之类的东西?

例如,想象一下这个 api 获取钩子:

const useFetch = () => {
   ...
    
   const [error, setError] = useState(null);
 
   const method = async () => {
     try {
        await api.fetchData();
     } catch(err) {
       setError(err);
     }
   };
   useEffect(() => {
     method();
   },[]);
   return { ..., error };
}

现在,在一个组件,我只是做:

const MyComponent = () => {
   const { error } = useFetch();
   if (error) return <FallbackUI />;
   return <MainUI />;
}

我可以使用一个 ErrorBoundary 组件来处理这种情况(API 调用错误),而不是有条件地呈现?

编辑

如果我只想在我的获取数据方法失败并且以前检索到任何数据时显示一个回退 UI 呢?

类似于:

const { data, getMoreData, error } = useFetchPosts(); // data is stateful inside the hook
  
if (error && !data) return <FallbackUI />;
return <MainUI data={data} />;
2

我在我的项目中遵循了以下方法,这些方法都是钩子 / 功能组件实现。

我使用https://github.com/bvaughn/react-error-boundary

import { ErrorBoundary } from "react-error-boundary";
<ErrorBoundary FallbackComponent={ErrorFallback}>
   <MyComponent />
</ErrorBoundary>   
//reject the promise so it gets bubbled up
const useFetch = () => {
   ...
    
   const [error, setError] = useState(null);
 
   const method = async () => {
     try {
        await api.fetchData();
     } catch(err) {
       // setError(err);
      return Promise.reject(err);
     }
   };
   useEffect(() => {
     method();
   },[]);
   return { ..., error };
}  
function ErrorFallback({ error }: { error: any }) {
  return (
    <>
      // you custom ui you'd like to return
    </>
  );
}  

编辑:

我通常在顶层有这个,所以这通常是所有未处理的异常的全部。换句话说,我将我的App.tsx包装在根index.tsx文件中ErrorBoundary。所以,我的代码看起来更像这样

 ...
 <ErrorBoundary FallbackComponent={ErrorFallback}>
    <SWRConfig ...>
       <React.StrictMode>
          <ScrollToTop></ScrollToTop>
             <App ... />
       </React.StrictMode>
      </SWRConfig>
  </ErrorBoundary>
   

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(486)
PHP将数组中的项目与同一行中的另一个普通项目相加
上一篇
安装phpapache模块启用sudoapt安装 libapache2-mod-php7.3
下一篇

相关推荐

  • cvt和自动挡哪个好提升驾驶体验的最佳选择

    CVT(可变转换器)是一种由传动带及传动轮组成的无级变速器,它可以在没有传动档位的情况下,根据驾驶者的驾驶习惯,自动调整传动轮之间的转速比,从而实现无级变速。自动挡是指车辆自动变速箱,它使用液力传动来实现变速,可以自动适应车辆的行驶状态,减少司机的疲劳,提高行车的舒适性。…

    2023-06-08 07:42:19
    0 21 91
  • cv一叶扁舟和清影轩阳:漫游在一叶扁舟和清影轩阳之间

    cv一叶扁舟是一款开源的计算机视觉库,用于图像处理、计算机视觉等。它提供了丰富的API,可以帮助开发者快速实现各种图像处理任务,如图像分割、目标检测、图像识别等。清影轩阳是一款开源的计算机视觉框架,用于图像处理、目标检测、分类等。它提供了丰富的API,可以帮助开发者快速实现各种图像处理任务,如图像分割、目标检测、图像识别等。…

    2023-08-05 07:06:20
    0 16 50
  • css设置滚动条宽度设置:This is a title

    CSS设置滚动条宽度的方法:使用CSS3的。-webkit-属性:…

    2023-06-06 10:53:01
    0 98 95
  • xl和xe汽车cvt:探索XL和XE汽车的CVT技术优势

    XL和XE汽车CVT是一种变速器,它使用液力变矩器代替传统的机械变速器,以达到更高的效率。它的工作原理是,当发动机输出功率时,液力变矩器就会将这些功率转换为液压能量,然后将能量传递到变速器的输出轴上,从而实现变速。…

    2023-04-09 00:41:04
    0 88 83
  • cordon bleu是什么意思:法式炸鸡卷——Cordon Bleu的经典之作

    Cordon Bleu是一种烹饪技术,其中肉片被置于奶酪和火腿之间,然后用面包屑裹上,最后煎炸或烤熟。这种技术通常用于制作鸡肉,但也可以用于制作其他类型的肉类,如牛肉或猪肉。…

    2024-01-27 15:13:30
    0 45 78
  • countif 非空:非空单元格的计数

    Countif 非空是指计算某个单元格不为空的数量。代码如下:…

    2023-04-22 15:54:15
    0 25 59
  • java double保留一位小数:How to Round a Double to One Decimal Place in

    示例示例使用类可以轻松实现java double保留一位小数的功能,具体代码如下:// 创建对象…

    2023-05-14 07:40:03
    0 22 93
  • linux如何写c语言一个完整的指南

    示例示例在Linux系统中,可以使用C语言编写源代码文件,然后使用GCC编译器来编译源代码文件,生成可执行文件。下面是一个简单的C语言代码示例:…

    2023-05-16 02:02:45
    0 46 18

发表评论

登录 后才能评论

评论列表(5条)