• react多组件出错其他正常显示

    问题：一个组件内部有很多个子组件，其中一个出错，怎么实现其他组件可以正常显示，而不是页面挂掉？

    一、错误边界

    可以捕获发生在其子组件树任何位置的 JavaScript 错误，并打印这些错误，同时展示降级 UI，错误边界可以捕获发生在整个子组件树的渲染期间、生命周期方法以及构造函数中的错误。

    错误边界无法捕获以下场景中产生的错误：

    • 事件处理（了解更多）
    • 异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
    • 服务端渲染
    • 它自身抛出来的错误（并非它的子组件）

    错误边界的工作方式类似于 JavaScript 的 catch {}，不同的地方在于错误边界只针对 React 组件。只有 class 组件才可以成为错误边界组件。大多数情况下, 你只需要声明一次错误边界组件, 并在整个应用中使用它。

    注意错误边界仅可以捕获其子组件的错误，它无法捕获其自身的错误。如果一个错误边界无法渲染错误信息，则错误会冒泡至最近的上层错误边界，这也类似于 JavaScript 中 catch {} 的工作机制。

    如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。当抛出错误后，请使用 static getDerivedStateFromError() 渲染备用 UI ，使用 componentDidCatch() 打印错误信息。

    错误边界应该放置在哪？

    错误边界的粒度由你来决定，可以将其包装在最顶层的路由组件并为用户展示一个 “Something went wrong” 的错误信息，就像服务端框架经常处理崩溃一样。你也可以将单独的部件包装在错误边界以保护应用其他部分不崩溃。

    static getDerivedStateFromError(error)

    此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数，并返回一个值以更新 state，在渲染阶段调用，因此不允许出现副作用。 如遇此类情况，请用 componentDidCatch()。

    componentDidCatch(error, info)

    此生命周期在后代组件抛出错误后被调用。 它接收两个参数：

    1. error —— 抛出的错误。
    2. info —— 带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。

    在“提交”阶段被调用，因此允许执行副作用。

    注意：如果发生错误，你可以通过调用 setState 使用 componentDidCatch() 渲染降级 UI，但在未来的版本中将不推荐这样做。 可以使用静态 getDerivedStateFromError() 来处理降级渲染。

    1、基本使用

    如下：若是没有ErrorBoundary组件，则组件内部报错整个页面会挂掉， 最顶层使用ErrorBoundary，那么一个组件报错整个页面UI会降级显示，若是每个子组件都包裹一层ErrorBoundary，那么一个组件出错，其他可以正常显示，出错的那个组件位置显示降级UI除非return null什么都不显示

    1. import ErrorBoundary from "./components/ErrorBoundary";
    2. import Child1 from "./test/Child1";
    3. import Child2 from "./test/Child2";
    4. import Child3 from "./test/Child3";
    5.  
    6. const Child = function () {
    7.   return (
    8.     <ErrorBoundary>
    9.       <Child1 />
    10.     ErrorBoundary>
    11.   );
    12. };
    13.  
    14. //父组件中含多个子组件，若一个组件内部出问题，其他组件可以正常显示=》每个子组件包括一层ErrorBoundary进行UI降级或直接return null
    15. function App() {
    16.   return (
    17.     <div className="App">
    18.       <ErrorBoundary>
    19.         <Child />
    20.         {/* <Child1 /> */}
    21.         <Child2 />
    22.         <Child3 />
    23.       ErrorBoundary>
    24.     div>
    25.   );
    26. }
    27.  
    28. export default App;
    1. const d: any = {};
    2. const Child1 = memo((props) => {
    3.   console.log(d.d.y);
    4.   return <p>this is Child1p>;
    5. });
    6. export default Child1;
    7.  
    8. const Child2 = (props) => {
    9.   const [count, setCount] = useState(0);
    10.  
    11.   return (
    12.     <div>
    13.       <p>this is Child2p>
    14.       <p>count:{count}p>
    15.       <button onClick={() => setCount((prev) => prev + 1)}>click mebutton>
    16.     div>
    17.   );
    18. };
    19. export default Child2;
    20.  
    21.  
    22. const Child3 = (props) => {
    23.   return <p>this is Child3p>;
    24. };
    25. export default Child3;
    1. import React from "react";
    2.  
    3. interface Props {
    4.   children: React.ReactNode; //ReactElement只能一个根元素  多个用ReactNode
    5. }
    6. interface State {
    7.   hasError: boolean;
    8. }
    9.  
    10. class ErrorBoundary extends React.Component<Props, State> {
    11.   constructor(props: Props) {
    12.     super(props);
    13.     this.state = { hasError: false };
    14.   }
    15.  
    16.   static getDerivedStateFromError(error: string) {
    17.     // 更新 state 使下一次渲染能够显示降级后的 UI
    18.     return { hasError: true };
    19.   }
    20.  
    21.   componentDidCatch(error: any, errorInfo: any) {
    22.     // 你同样可以将错误日志上报给服务器
    23.     // logErrorToMyService(error, errorInfo);
    24.     console.log("componentDidCatch: ", error, errorInfo);
    25.   }
    26.  
    27.   render() {
    28.     if (this.state.hasError) {
    29.       // 你可以自定义降级后的 UI 并渲染
    30.       // return null
    31.       return <h1>Something went wrong.h1>;
    32.     }
    33.  
    34.     return this.props.children;
    35.   }
    36. }
    37.  
    38. export default ErrorBoundary;

    2、可配置的错误边界

    将日志上报的方法以及显示的 UI 通过接受传参的方式进行动态配置，对于传入的UI，我们可以设置以react组件的方式 或 是一个React Element进行接受，而且通过组件的话，我们可以传入参数，这样可以在兜底 UI 中拿到具体的错误信息。

    1. import React from "react";
    2.  
    3. interface FallbackRenderProps {
    4.   error: Error;
    5. }
    6. interface Props {
    7.   children: React.ReactNode; //ReactElement只能一个根元素  多个用ReactNode
    8.   onError?: (error: Error, errorInfo: string) => void;
    9.   fallback?: React.ReactElement;
    10.   FallbackComponent?: React.FunctionComponent<FallbackRenderProps>;
    11. }
    12. interface State {
    13.   hasError: boolean;
    14.   error: Error | null;
    15. }
    16.  
    17. class ErrorBoundary extends React.Component<Props, State> {
    18.   constructor(props: Props) {
    19.     super(props);
    20.     this.state = { hasError: false, error: null};
    21.   }
    22.  
    23.   static getDerivedStateFromError(error: Error) {
    24.     // 更新 state 使下一次渲染能够显示降级后的 UI
    25.     return { hasError: true, error };
    26.   }
    27.  
    28.   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    29.     if (this.props.onError) {
    30.       //上报日志通过父组件注入的函数进行执行
    31.       this.props.onError(error, errorInfo.componentStack);
    32.     }
    33.   }
    34.  
    35.   render() {
    36.     const { fallback, FallbackComponent } = this.props;
    37.     const { error } = this.state;
    38.     if (error) {
    39.       const fallbackProps = { error };
    40.       //判断是否为React Element
    41.       if (React.isValidElement(fallback)) {
    42.         return fallback;
    43.       }
    44.       //组件方式传入
    45.       if (FallbackComponent) {
    46.         return <FallbackComponent {...fallbackProps} />;
    47.       }
    48.  
    49.       throw new Error("ErrorBoundary 组件需要传入兜底UI");
    50.     }
    51.     return this.props.children;
    52.   }
    53. }
    54.  
    55. export default ErrorBoundary;

    使用：

    1. import ErrorBoundary from "./components/ErrorBoundary";
    2. import ErrorBoundaryWithConfig from "./components/ErrorBoundaryWithConfig";
    3. import Child1 from "./test/ErrorTest/Child1";
    4. import Child2 from "./test/ErrorTest/Child2";
    5. import Child3 from "./test/ErrorTest/Child3";
    6.  
    7. interface IErrorUIprops {
    8.   error: Error;
    9. }
    10. const ErrorUI: React.FC<IErrorUIprops> = ({ error }) => {
    11.   return (
    12.     <div>
    13.       <p>出错了....p>
    14.       <p>
    15.         错误信息：
    16.         {JSON.stringify(error, ["message", "arguments", "type", "name"])}
    17.       p>
    18.     div>
    19.   );
    20. };
    21.  
    22. const Child = function () {
    23.   const onError = (error: Error, errorInfo: string) => {
    24.     console.log("Child error ", error);
    25.     console.log("Child errorInfo ", errorInfo);
    26.   };
    27.  
    28.   return (
    29.     <ErrorBoundaryWithConfig onError={onError} FallbackComponent={ErrorUI}>
    30.       <Child1 />
    31.     ErrorBoundaryWithConfig>
    32.   );
    33. };
    34.  
    35.  
    36. function App() {
    37.   return (
    38.     <div className="App">
    39.       <ErrorBoundary>
    40.         <Child />
    41.         {/* <Child1 /> */}
    42.         <Child2 />
    43.         <ErrorBoundaryWithConfig fallback={<p>出错了....p>}>
    44.           <Child3 />
    45.         ErrorBoundaryWithConfig>
    46.       ErrorBoundary>
    47.     div>
    48.   );
    49. }
    50.  
    51. export default App;

    进一步优化：有时候会遇到这种情况：服务器突然 503、502 了，前端获取不到响应，这时候某个组件报错了，但是过一会又正常了。比较好的方法是用户点一下被ErrorBoundary封装的组件中的一个方法来重新加载出错组件，不需要重刷页面，这时候需要兜底的组件中应该暴露出一个方法供ErrorBoundary进行处理。

     

    1. import React from "react";
    2.  
    3. interface FallbackRenderProps {
    4.   error: Error;
    5.   resetErrorBoundary?: () => void;
    6. }
    7.  
    8. interface Props {
    9.   children: React.ReactNode; //ReactElement只能一个根元素  多个用ReactNode
    10.   onError?: (error: Error, errorInfo: string) => void;
    11.   fallback?: React.ReactElement;
    12.   FallbackComponent?: React.FunctionComponent<FallbackRenderProps>;
    13.   onReset?: () => void;
    14.   fallbackRender?: (
    15.     fallbackRenderProps: FallbackRenderProps
    16.   ) => React.ReactElement;
    17. }
    18. interface State {
    19.   hasError: boolean;
    20.   error: Error | null;
    21. }
    22.  
    23. class ErrorBoundary extends React.Component<Props, State> {
    24.   constructor(props: Props) {
    25.     super(props);
    26.     this.state = { hasError: false, error: null };
    27.   }
    28.  
    29.   static getDerivedStateFromError(error: Error) {
    30.     // 更新 state 使下一次渲染能够显示降级后的 UI
    31.     return { hasError: true, error };
    32.   }
    33.  
    34.   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    35.     if (this.props.onError) {
    36.       //上报日志通过父组件注入的函数进行执行
    37.       this.props.onError(error, errorInfo.componentStack);
    38.     }
    39.   }
    40.  
    41.   resetErrorBoundary = () => {
    42.     if (this.props.onReset) this.props.onReset();
    43.     this.setState({ hasError: false, error: null });
    44.   };
    45.  
    46.   render() {
    47.     const { fallback, FallbackComponent, fallbackRender } = this.props;
    48.     const { error } = this.state;
    49.     if (error) {
    50.       const fallbackProps = {
    51.         error,
    52.         resetErrorBoundary: this.resetErrorBoundary,
    53.       };
    54.  
    55.       //判断是否为React Element
    56.       if (React.isValidElement(fallback)) {
    57.         return fallback;
    58.       }
    59.  
    60.       //函数方式传入
    61.       if (typeof fallbackRender === "function") {
    62.         return fallbackRender(fallbackProps);
    63.       }
    64.  
    65.       //组件方式传入
    66.       if (FallbackComponent) {
    67.         return <FallbackComponent {...fallbackProps} />;
    68.       }
    69.  
    70.       throw new Error("ErrorBoundary 组件需要传入兜底UI");
    71.     }
    72.  
    73.     return this.props.children;
    74.   }
    75. }
    76.  
    77. export default ErrorBoundary;

    如上：正常是显示children，children里面报错就会被捕获到，之后进行UI降级， 重置也是使其显示children，若是没有错误了那么正常显示，若是还是有错误还会被捕获到。

    1. import { useState } from "react";
    2. import ErrorBoundary from "./components/ErrorBoundary";
    3. import ErrorBoundaryWithConfig from "./components/ErrorBoundaryWithConfig";
    4. // import Home from "./test/home";
    5. import Child1 from "./test/ErrorTest/Child1";
    6. import Child2 from "./test/ErrorTest/Child2";
    7. import Child3 from "./test/ErrorTest/Child3";
    8.  
    9. interface IErrorUIprops {
    10.   error: Error;
    11.   resetErrorBoundary?: () => void;
    12. }
    13. const ErrorUI: React.FC<IErrorUIprops> = ({ error, resetErrorBoundary }) => {
    14.   return (
    15.     <div>
    16.       <p>出错了....p>
    17.       <p>
    18.         错误信息：
    19.         {JSON.stringify(error, ["message", "arguments", "type", "name"])}
    20.       p>
    21.       {resetErrorBoundary && (
    22.         <button onClick={resetErrorBoundary}>Try againbutton>
    23.       )}
    24.     div>
    25.   );
    26. };
    27.  
    28. function App() {
    29.   const [count, setCount] = useState(0);
    30.  
    31.   const onReset = () => setCount(0); //点击重置时进行的回调
    32.  
    33.   const onError = (error: Error, errorInfo: string) => {
    34.     console.log("Child error ", error);
    35.     console.log("Child errorInfo ", errorInfo);
    36.   };
    37.  
    38.   // fallback 组件的渲染函数
    39.   const renderFallback = (props: IErrorUIprops) => {
    40.     return <ErrorUI {...props} />;
    41.   };
    42.  
    43.   return (
    44.     <div className="App">
    45.       <ErrorBoundary>
    46.         <section>
    47.           <button onClick={() => setCount((count) => count + 1)}>+button>
    48.           <button onClick={() => setCount((count) => count - 1)}>-button>
    49.         section>
    50.         <hr />
    51.         {/* <Child1 /> */}
    52.         <ErrorBoundaryWithConfig
    53.           onError={onError}
    54.           onReset={onReset}
    55.           fallbackRender={renderFallback}
    56.           /*FallbackComponent={ErrorUI}*/
    57.         >
    58.           <Child1 count={count} />
    59.         ErrorBoundaryWithConfig>
    60.  
    61.         <Child2 />
    62.         <ErrorBoundaryWithConfig fallback={<p>出错了....p>}>
    63.           <Child3 count={count} />
    64.         ErrorBoundaryWithConfig>
    65.       ErrorBoundary>
    66.     div>
    67.   );
    68. }
    69.  
    70. export default App;

    注意：点击+，当达到2时Child1报错（ if (count === 2) throw new Error("count is two");），UI降级，继续点击+，为3时Child3报错（if (count === 3) throw new Error("count is three");）UI降级，此时Child1有重置，点击重置按钮onReset把count重置为0了，Child1 UI也重置了显示正常，而Child3之前显示了降级UI，没有重置或不刷新，页面即使数据正常了UI不会更新，还是降级UI，所以重置按钮在不刷新页面情况下可以解决此类问题。

    局限性：触发重置的动作只能在 fallback 里面。假如我的重置按钮不在 fallback 里呢？或者 onReset 函数根本不在这个 App 组件下那怎么办呢？难道要将 onReset 像传家宝一路传到这个 App 再传入 ErrorBoundary 里？

    思路1：能不能监听状态的更新，只要状态更新就重置，反正就重新加载组件也没什么损失，这里的状态完全用全局状态管理，放到 Redux 中。

    思路2：上面的思路听起来不就和 useEffect 里的依赖项 deps 数组一样嘛，不妨在 props 提供一个 resetKeys 数组，如果这个数组里的东西变了，ErrorBoundary 就重置，这样一控制是否要重置就更灵活了。

    假如是由于网络波动引发的异常，那页面当然会显示 fallback 了，如果用上面直接调用 props.resetErrorBoundary 方法来重置，只要用户不点“重置”按钮，那块地方永远不会被重置。又由于是因为网络波动引发的异常，有可能就那0.001 秒有问题，别的时间又好了，所以如果我们将一些变化频繁的值放到 resetKeys 里就很容易自动触发重置。例如，报错后，其它地方的值变了从而更改了 resetKeys 的元素值就会触发自动重置。对于用户来说，最多只会看到一闪而过的 fallback，然后那块地方又正常了。

    1. // 本组件 ErrorBoundary 的 props
    2. interface Props{
    3.   ...
    4.   resetKeys?: Array;
    5.   onResetKeysChange?: (
    6.     prevResetKey: Array | undefined,
    7.     resetKeys: Array | undefined,
    8.   ) => void;
    9. }
    10.  
    11. // 检查 resetKeys 是否有变化
    12. const changedArray = (a: Array = [], b: Array = []) => {
    13.   return (
    14.     a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]))
    15.   );
    16. };
    17.  
    18. class ErrorBoundary extends React.Component<Props, State> {
    19.   ...
    20.  
    21.   componentDidUpdate(prevProps: Readonly>) {
    22.     const { resetKeys, onResetKeysChange } = this.props;
    23.  
    24.     // 只要 resetKeys 有变化，直接 reset
    25.     if (changedArray(prevProps.resetKeys, resetKeys)) {
    26.       if (onResetKeysChange) {
    27.         onResetKeysChange(prevProps.resetKeys, resetKeys);
    28.       }
    29.  
    30.       // 重置 ErrorBoundary 状态，并调用 onReset 回调
    31.       this.reset();
    32.     }
    33.   }
    34.  
    35.   resetErrorBoundary = () => {
    36.     if (this.props.onReset) this.props.onReset();
    37.     this.reset();
    38.   };
    39.  
    40.   reset = () => {
    41.     this.setState({ hasError: false, error: null });
    42.   }; 
    43.  
    44.   render() {
    45.     ...
    46.   }
    47. }

    上面存在问题：假如某个 key 是触发 error 的元凶，那么就有可能触发二次 error 的情况：

    1. xxxKey 触发了 error，组件报错
    2. 组件报错导致 resetKeys 里的一些东西改了
    3. componentDidUpdate 发现 resetKeys 里有东西更新了，不废话，马上重置
    4. 重置完了，显示报错的组件，因为 error 还存在（或者还未解决），报错的组件又再次触发了 error
    5. ...

    如下：假如接口请求失败导致组件报错即xxkey触发组件错误：render渲染children，children报错被getDerivedStateFromError等捕获UI降级，捕获到错误后重新请求导致resetKeys里面的请求状态又发生改变，componentDidUpdate就会重置，重置后组件还是报错，就会出现如上循环。=》包括下面案例只是简单举例便于理解，应用场景不符合

    1.   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    2.     if (this.props.onError) {
    3.       //上报日志通过父组件注入的函数进行执行
    4.       this.props.onError(error, errorInfo.componentStack);
    5.     }
    6.   }
    7.  
    8.  
    9.  const onError = (error: Error, errorInfo: string) => {
    10.     setCount(Math.random() * 3);
    11.   };
    12.  
    13.  
    14. const Child1: FC<Props> = memo(({ count }) => {
    15.   if (count < 3) throw new Error("count is two");
    16.  
    17.   return <p>this is Child1p>;
    18. });
    19.  
    20. export default Child1;

     这样的情况下就会被该ErrorBoundary的上层错误边界捕获，导致整体UI降级。

     优化：有错误才重置，且不是因为错误导致后续连续

    1.  componentDidUpdate(prevProps: Readonly>, preState: State) {
    2.     const {error} = this.state;
    3.     const {resetKeys, onResetKeysChange} = this.props;
    4.     
    5.     // 已经存在错误，并且是第一次由于 error 而引发的 render/update，那么设置 flag=true，不会重置 
    6.     if (error !== null && !this.updatedWithError) {
    7.       this.updatedWithError = true;
    8.       return;
    9.     }
    10.  
    11.     // 已经存在错误，并且是普通的组件 render，则检查 resetKeys 是否有改动，改了就重置
    12.     if (error !== null && preState.error !== null && changedArray(prevProps.resetKeys, resetKeys)) {
    13.       if (onResetKeysChange) {
    14.         onResetKeysChange(prevProps.resetKeys, resetKeys);
    15.       }
    16.  
    17.       this.reset();
    18.     }
    19.   }
    1. 用 updatedWithError 作为 flag 判断是否已经由于 error 出现而引发的 render/update
    2. 如果当前没有错误，无论如何都不会重置
    3. 每次更新：当前存在错误，且第一次由于 error 出现而引发的 render/update，则设置 updatedWithError = true，不会重置状态
    4. 每次更新：当前存在错误，且如果 updatedWithError 为 true 说明已经由于 error 而更新过了，以后的更新只要 resetKeys 里的东西改了，都会被重置

    简单案例：

    1. function App() {
    2.   const [explode, setExplode] = React.useState(false)
    3.  
    4.   return (
    5.     <div>
    6.       <button onClick={() => setExplode(e => !e)}>toggle explodebutton>
    7.       <ErrorBoundary
    8.         FallbackComponent={ErrorFallback}
    9.         onReset={() => setExplode(false)}
    10.         resetKeys={[explode]}
    11.       >
    12.         {explode ? <Bomb /> : null}
    13.       ErrorBoundary>
    14.     div>
    15.   )
    16. }

    注意执行逻辑：

    初次渲染，执行render，渲染children报错，getDerivedStateFromError捕获错误，导致state变化，重新执行render，UI降级，初次渲染不执行componentDidUpdate。在错误捕获时执行了componentDidCatch，导致resetkey变化，props变化重新执行render，遇到判断error存在还是显示降级UI，那么就不不会再执行getDerivedStateFromError和componentDidCatch，但是props变化了会执行componentDidUpdate，在这里判断若是由于出错导致更新跳过重置=》整体就是出错导致UI降级。

    非初次渲染：如初次渲染页面正常，父组件某些操作导致状态变化影响到resetkey变化，props改变执行render，渲染children报错，getDerivedStateFromError捕获错误，导致state变化，重新执行render，UI降级，但此时不是初次渲染props改变要执行componentDidUpdate，在上面判断了判断若是由于出错导致更新跳过重置。但是componentDidCatch执行时又改变resetkey，props改变执行render，此时error存在直接显示降级UI不会再触发getDerivedStateFromError和componentDidCatch，但是props变化了要执行componentDidUpdate，此时已经不是错误导致的更新，componentDidUpdate执行重置（保证重置没有问题否则又会从开始非初次渲染循环，此时可以在componentDidCatch设置this.updatedWithError = false，但是这样就没有意义了）

    在 componentDidUpdate 里，只要不是由于 error 引发的组件渲染或更新，而且 resetKeys 有变化了，那么直接重置组件状态来达到自动重置=》只适用于某些场景，使用时注意。

    至此，我们拥有了两种可以实现重置的方式了：

    方法触发范围使用场景思想负担
    手动调用 resetErrorBoundary一般在 fallback 组件里用户可以在 fallback 里手动点击“重置”实现重置最直接，思想负担较轻
    更新 resetKeys哪里都行，范围更广用户可以在报错组件外部重置、resetKeys 里有报错组件依赖的数据、渲染时自动重置间接触发，要思考哪些值放到 resetKeys 里，思想负担较重

    以上ErrorBoundary的使用可以整体封装成HOC：

    1. import ErrorBoundary from "../components/ErrorBoundaryWithConfig";
    2. import { Props as ErrorBoundaryProps } from "../components/ErrorBoundaryWithConfig";
    3.  
    4. /**
    5.  * with 写法
    6.  * @param Component 业务组件
    7.  * @param errorBoundaryProps error boundary 的 props
    8.  */
    9.  
    10. function withErrorBoundary
      (
    11.   Component: React.ComponentType
      ,
    12.   errorBoundaryProps: ErrorBoundaryProps
    13. ): React.ComponentType
       {
    14.   const Wrapped: React.ComponentType
       = (props) => {
    15.     return (
    16.       <ErrorBoundary {...errorBoundaryProps}>
    17.         <Component {...props} />
    18.       ErrorBoundary>
    19.     );
    20.   };
    21.  
    22.   // DevTools 显示的组件名
    23.   const name = Component.displayName || Component.name || "Unknown";
    24.   Wrapped.displayName = `withErrorBoundary(${name})`;
    25.  
    26.   return Wrapped;
    27. }
    28.  
    29. export default withErrorBoundary;

    在使用错误边界组件处理普通组件时，错误边界无法捕获异步代码、服务端错误、事件内部错误以及自己错误，所以遇到这种情况可以使用try catch或者异步操作自身的catch捕获，或者直接抛出异常，封装如下：

    1. function useErrorHandler(givenError?: unknown): (error: unknown) => void {
    2.   const [error, setError] = React.useState(null)
    3.   if (givenError != null) throw givenError
    4.   if (error != null) throw error
    5.   return setError
    6. }

     使用：

    1. import { useErrorHandler } from 'react-error-boundary'
    2.  
    3. function Greeting() {
    4.   const [greeting, setGreeting] = React.useState(null)
    5.   const handleError = useErrorHandler()
    6.  
    7.   function handleSubmit(event) {
    8.     event.preventDefault()
    9.     const name = event.target.elements.name.value
    10.     fetchGreeting(name).then(
    11.       newGreeting => setGreeting(newGreeting),
    12.       handleError,
    13.     )
    14.   }
    15.  
    16.   return greeting ? (
    17.     <div>{greeting}div>
    18.   ) : (
    19.     <form onSubmit={handleSubmit}>
    20.       <label>Namelabel>
    21.       <input id="name" />
    22.       <button type="submit">get a greetingbutton>
    23.     form>
    24.   )
    25. }

    参考： 

    ​​​​​​​第三方库：react-error-boundary

    GitHub - haixiangyan/my-react-error-bounday: 手把手教你实现 react-error-boundary

  • 相关阅读:
    响应式驱动与双向数据绑定
    手机在我状态查询易语言代码
    数据结构从入门到精通——栈
    221. 最大正方形
    Dll劫持
    《恋上数据结构与算法》第1季：算法概述
    Dorkish：一款针对OSINT和网络侦查任务的Chrome扩展
    企业文件外发要如何管控？外发文件管理制度是重要基础
    Java | 排序内容大总结
    javaweb论坛网站源码
  • 原文地址：https://blog.csdn.net/CamilleZJ/article/details/127875101