相关疑难解决方法(0)

我的React应用程序正在捕获错误并正确显示我的自定义错误消息,但一秒钟后它仍然显示原始错误记录.因此,后备UI然后被初始错误屏幕取代.

测试组件:

import React, { Component } from 'react';

export class Test extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
        <ErrorBoundary>

        <Error></Error>

        </ErrorBoundary>);
    }
}

错误组件:

import React, { Component } from 'react';

export class Error extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return ({ test });
    }
}

在错误组件测试中未定义,因此将抛出未定义的错误.

ErrorBoundary:

import React, { Component } from 'react';

export class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { error: null, errorInfo: null }; …

我有一个页面，其中使用使用React Router加载的不同组件。当我使用React路由器路由到不同页面时，是否可以如下面的代码所示那样在每个组件中集成错误边界？

我的目标是特别针对单个组件显示错误，以便在一个组件出现错误的情况下其他组件也可以工作。

请在下面查看我的代码：

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

registerServiceWorker();

App.js

import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Link } from 'react-router-dom';
//import ErrorBoundary from "./errorboundary";
import MyComponent1 from './component1';
import MyComponent2 from './component2';

class App extends Component {
render() {
return (
<Router>
<div style={{ backgroundColor: 'green' }}>
<div style={{ backgroundColor: '#f0f0ae', height: '30px' }}>
<Link to='/'>Link 1</Link> &#160;&#160; …