Javascript componentDidCatch之后重定向用户的方法

在我的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;
    }
}

import*as React from“React”；
接口错误边界状态{
hasrerror：布尔型；
errorInfo:React.errorInfo；
}
导出类ErrorBoundary扩展React.Component{
构造器（道具：任何）{
超级（道具）；
此.state={
错误：错，
错误信息：未定义，
};
}
公共组件didcatch（错误：error，信息：React.ErrorInfo）{
这是我的国家({
哈斯：没错，
错误信息：信息
});
控制台错误（错误，信息）；
}
公共渲染（）{
if（this.state.hasError）{
返回(
出现问题，请稍后再试。
);
}
返回此.props.children；
}
}

---

当hasError设置为true时，它会保持在那里。哪里是一个好地方，可以将其设置为false并再次向孩子们展示

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

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