时间戳

首页 > 解决方案 > React 错误边界被调用但不渲染

javascript - React 错误边界被调用但不渲染

问题描述

请参阅此代码框以进行复制

我创建了一个错误边界，将应用程序重定向到/error路由。但是，有时当触发错误时（在代码框的情况下，通过单击错误页面的链接），我的错误边界被调用并且浏览器被重定向到/error路由但应该显示的组件/error不显示 /渲染，而我只看到一个白屏。出了什么问题，为什么会调用错误边界以重定向浏览器但渲染未完成？谢谢！

index.js：

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { render } from "react-dom";
import ErrorBoundary from "./errorBoundary";
import "./index.css";

const App = () => (
  <div>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/bug">Page with Bug</Link>
        </li>
      </ul>
    </nav>
    <Switch>
      <Route path="/bug">
        <BugPage />
      </Route>
      <Route path="/error">
        <ErrorPage />
      </Route>
      <Route path="/">
        <HomePage />
      </Route>
    </Switch>
  </div>
);

const HomePage = () => <h1>Home Page</h1>;

const ErrorPage = () => <h1>This is the error boundary</h1>;

const BugPage = () => {
  const dummyData = {
    foo: {
      id: 1
    }
  };

  return <h1>{dummyData.bar.id}</h1>;
};

const Spa = () => (
  <Router>
    <ErrorBoundary>
      <App />
    </ErrorBoundary>
  </Router>
);

render(<Spa />, document.getElementById("root"));

错误边界.js：

import * as React from "react";
import { withRouter } from "react-router-dom";

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

  componentDidCatch(error) {
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      this.props.history.push("/error");
    }
    return this.props.children;
  }
}

export default withRouter(ErrorBoundary);

标签： javascriptreactjsreact-router

解决方案

我只是componentDidCatch()用来打电话给你的重定向，即

componentDidCatch(error) {
  this.props.history.push('/error');
}

我不完全确定调用这样的函数render()是否有效，但你也可以这样做：

render() {
  return this.state.hasError ? <SomeErrorComponent /> : this.props.children;
}

推荐阅读