javascript - 在componentDidCatch之后重定向用户的方法

Question

在我的componentDidCatch()方法中捕获了错误，并且呈现了自定义错误UI。

什么是从错误继续进行而不使用户强制更新页面的巧妙方法？

import * as React from "react";

interface ErrorBoundaryState {
    hasError: boolean;
    errorInfo: React.ErrorInfo;
}

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

    public componentDidCatch(error: Error, info: React.ErrorInfo) {
        this.setState({
            hasError: true,
            errorInfo: info
        });
        console.error(error, info);
    }

    public render() {
        if (this.state.hasError) {
            return (
                <h2>Something went wrong, please try again later.</h2>
            );
        }
        return this.props.children;
    }
}

当hasError设置为true时，它会停留在那里。将其设置为false并再次向 child 展示的好地方在哪里？

Answer 1

我认为用户想知道为什么被打断了。因此，您可以显示一个错误，向用户表示抱歉，并告诉他们5秒钟后他可以重新使用该应用程序。

您可以使用setTimeout在5秒后将状态设置为hasError:false。