何时使用反应错误边界组件 (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>
   

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

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

相关推荐

  • vscode code命令:# 如何使用 VSCode 命令

    VSCode Code命令是Visual Studio Code的一个内置命令,用于在本地和远程服务器上执行代码。它可以让你在不同的系统上运行代码,而不需要安装任何软件。…

    2023-01-22 09:55:35
    0 43 64
  • cv糖醋排骨是弯的吗弯曲的美味

    cv糖醋排骨不是弯的,它是一种制作方法,通常用来制作排骨。代码:…

    2023-01-30 08:19:31
    0 83 84
  • cv树洞柒夜事件CV树洞中的秘密与惊奇

    cv树洞柒夜事件是一个有趣的计算机视觉活动,它提供了一种新的方式来利用计算机视觉技术来探索和发现景观。它始于2020年7月,由一群热爱计算机视觉的研究者和开发者发起,他们希望通过使用机器学习技术来探索景观中的精彩之处。cv树洞柒夜事件的目标是使用机器学习技术来探索景观中的精彩之处,并利用这些发现来改善景观设计。参与者需要使用机器学习技术来探索景观,并利用这些发现来改善景观设计。参与者可以使用Python,OpenCV,TensorFlow等技术来完成任务,并将其发布在GitHub上。…

    2023-01-08 12:49:50
    0 37 37
  • cv小随:如何利用CV技术提升求职成功率

    示例示例cv小随是一种基于计算机视觉的智能技术,它可以帮助用户自动识别图像中的物体、场景和行为,从而实现自动化的图像处理。cv小随可以用于多种应用场景,如图像搜索、图像分类、图像识别、图像检测等。…

    2023-01-01 11:12:42
    0 98 97
  • win10可以安装cad2007吗:CAD2007是否可以在Win10上安装?

    不可以,因为CAD2007不支持Windows 10系统。如果想要安装CAD2007,需要安装在Windows XP或者Windows 7系统上。…

    2023-01-20 02:04:42
    0 53 53
  • iban code是什么意思一种国际银行帐户号码标准

    IBAN(International Bank Account Number)代码是一种国际标准的银行账户号码,用于在不同国家之间进行国际转账。它由一串字母和数字组成,通常由2至4个字母开头,后面跟着一串数字。…

    2022-12-30 09:24:47
    0 93 48
  • cv 机器视觉:如何利用机器视觉技术提高图像处理效率

    CV(Computer Vision)机器视觉是一门研究计算机如何理解和处理图像的学科,它旨在使计算机能够以人类般的方式识别和理解图像。它主要应用于图像处理、图像分析、计算机视觉等领域,广泛应用于机器人、自动驾驶、医疗影像分析等领域。…

    2023-01-23 11:32:51
    0 95 27
  • mac 开发c++:Mac 下开发 C++ 的入门指南

    示例示例Mac OS X 是一个强大的操作系统,可以用来开发 C++ 应用程序。下面是一个简单的 C++ 程序的代码示例:#include…

    2023-01-02 10:39:58
    0 30 63

发表评论

登录 后才能评论

评论列表(54条)