Question

这是我的错误边界：

export default class ErrorBoundary extends React.Component<Props> {

    state: State = {error: null, errorInfo: null};

    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
        this.setState({
            error: error,
            errorInfo: errorInfo
        })
    }

    render() {
        if (this.state.errorInfo) {
            return (
                <ErrorContainer>
                    <Title>Runtime Error</Title>
                    <ErrorMessage>{String(this.state.error)}</ErrorMessage>
                </ErrorContainer>
            );
        }

        return this.props.children;
    }
}

当我的应用崩溃时，它看起来像这样：

问题是当我修复该错误时，消息永不消失。

很容易理解为什么：我已将错误复制到状态中。在热重装期间永远不会清除该状态。

我的问题是：如何在热重载时如何清除错误状态？

理想情况下，只有在重新加载子代/后代时才清除状态，但这可能太难确定，因此只要 any 组件重新加载，我都愿意清除它。如果错误未解决，它可能只会再次捕获。

使用推荐的方法配置热重载：

const App = () => (
    <ErrorBoundary>
        <BrowserRouter>
            <ScrollTop>
                <Container>
                    /* blah blah */

                    <TabContent>
                        <ErrorBoundary>
                            /* blah */
                        </ErrorBoundary>
                    </TabContent>
                </Container>
            </ScrollTop>
        </BrowserRouter>
    </ErrorBoundary>

)

export default hot(module)(App)

Answer 1

这不能直接回答问题，但是我发现了一个与React-Router一起使用的小技巧。如果在路线内移动错误边界，则导航到新页面时自然会清除状态！

<Switch>
    {routes.map(({path, component: Page}, idx) => (
        <Route key={idx} exact path={path}>
            {(routeProps: RouteComponentProps) => <ErrorBoundary><Page/></ErrorBoundary>}
        </Route>
    ))}
</Switch>

这样，每个页面都可以有自己的错误状态。来回导航会清除状态。

react-hot-loader +错误边界：热更新后如何清除错误？

1 个答案: