reactjs - 为什么这个组件在抛出错误后才被渲染？

Question

我目前正在关注 React JS 文档，但遇到了错误边界未按预期工作的问题。我尝试复制文档提供的 CodePen 中显示的示例以及我在互联网上找到的其他一些简单示例，但是它对我来说与演示中的效果不同，我正在努力了解原因。

确切的问题是错误被抛出两次，因为 BuggyCounter 组件渲染了额外的时间。我不明白为什么该组件会第二次渲染。

请看一下这个最小的示例。

import React, { Component } from 'react';

function App() {
  return (
    <ErrorHandler>
      <BuggyCounter />
    </ErrorHandler>
  );
}

class ErrorHandler extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: false,
      errorInfo: null
    }
  }

  componentDidCatch(error, errorInfo) {
    this.setState({ error, errorInfo });
  }

  render() {
    console.log('rendering ErrorHandler. ' + (this.state.error ? "error" : "no error"));
    if(this.state.error) {
      return <p>Error</p>
    }
    return this.props.children;
  }
}

class BuggyCounter extends Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
  }

  handleClick = () => {
    this.setState(({ counter }) => ({
      counter: counter + 1
    }));
  };

  render() {
    console.log('rendering BuggyCounter. count: ' + this.state.counter);
    if (this.state.counter === 5) {
      throw new Error('I crashed!');
    }
    return <h1 onClick={this.handleClick}>{this.state.counter}</h1>
  }
}

export default App;

BuggyCounter 组件正在被替换为 <p>标签呈现“Error”(这是期望的效果)，但只是一会儿。之后，立即显示默认错误页面，违背了错误边界的目的。

这是我的控制台:

如果您能提供有关此主题的任何信息，我将不胜感激。

临时决议:

这不是我问题的答案，但防止冗余渲染的一种方法是从 componentDidUpdate 抛出错误而不是render .

  render() {
    console.log('rendering BuggyCounter. count: ' + this.state.counter);
    return <h1 onClick={this.handleClick}>{this.state.counter}</h1>
  }

  componentDidUpdate() {
    if(this.state.counter === 5)
      throw new Error('I crashed');
  }

Answer 1

编辑2:

嗯，问题出在react版本 16.12.0 ，如果将其更改为 16.0.0 ，它不会重新渲染两次。您可以在 this codesandbox 中对此进行测试通过更改 react 版本。

这是一个很好的问题，可以在 React github 上添加。

可能是 React 核心代码内部的东西。因此，根据您的版本，它将渲染两次或仅渲染一次。

<小时/>

编辑:

为什么组件会重新渲染？不知道。

但是，error page is only shown in development mode ，所以你的componentDidCatch正在工作。

<小时/>

旧的/错误的答案

The BuggyCounter component is being replaced with the <p> tag which renders “Error” (which is the desired effect), but only for a moment. Immediately after that, the default error page is being shown, defeating the purpose of Error Boundaries.

only for a moment部分不正确。该错误页面实际上仅用于开发，如果在生产模式下运行，则不会显示。

正如您在我的 example 中看到的那样，如果关闭错误页面，您将看到错误组件。

这在answer中有解释。 .

因此，在react文档提供的演示版本中，它不会显示错误页面，因为它是配置，而不是它本身的代码。您的代码工作正常，只需关闭错误页面并查看结果即可。