errorboundary dy dy not of capture错误时，当简单组件调用词典中哪些错误

Question

我在

应该出错的简单组件，但部分的部分仍应呈现：

export const App = () => {
    return 
          <ErrorBoundary>
            <Suspense fallback={<LoadingIcon/>}>
              <div>this should show #1</div>
              <ErrorBoundary>
               <SimpleComponent />
              </ErrorBoundary>
            </Suspense>
        </ErrorBoundary>
});


export const SimpleComponent: FC = ({}) => {
    const mydictionary: Dictionary<() => JSX.Element> = {};

    return (
        <div>
           stuff that should still render. #2
            <ErrorBoundary>
                <div>{mydictionary['nonexistentvalue']()}</div>
            </ErrorBoundary>
        </div>
    );
};

错误边界：

export class ErrorBoundary extends React.Component<{}, { hasError: any }> {
    constructor(props: any) {
        super(props);
        this.state = { hasError: false };
    }

    static getDerivedStateFromError(error: any) {
        // Update state so the next render will show the fallback UI.
        console.log('err', error);
        return { hasError: true };
    }

    componentDidCatch(error: any, errorInfo: any) {
        this.setState({ hasError: true });
        console.error('Help', error, errorInfo);
    }

    render() {
        if (this.state.hasError) {
            // You can render any custom fallback UI
            return <h1>Something went wrong here.</h1>;
        }

        return this.props.children;
    }
}

我得到的只是单个在这里出现问题。在页面上。

Answer 1

尝试将您的SimpleComponent与您的errorboundary组件包装。当SimpleComponent将被包装错误的错误边界组件应正确工作。 Docs说，错误边界组件只能处理用此错误边界组件包裹的儿童组件的问题。在同一级别上，它行不通。

<ErrorBoundary>
  <SimpleComponent/>
</ErrorBoundary>