浏览器上不显示反应错误，只得到一个空屏幕

Question

React 只显示一个空白屏幕，而不是在我的讲师系统上显示类似这样的错误：

我该如何解决这个问题？

编辑：我绝对可以在控制台和 IDE 中看到错误，但为了测试错误边界，我想解决这个问题。目前，当我使用错误边界并使用 throw new Error() 创建自己的错误时，错误边界仅控制台。记录错误但不显示 UI，我的屏幕只会冻结。

关于使用错误边界： App.js：

import UserFinder from './components/UserFinder';
import UsersContext from './store/user-context';
import ErrorBoundary from './components/ErrorBoundary';

const DUMMY_USERS = [
  { id: 'u1', name: 'Max' },
  { id: 'u2', name: 'Manuel' },
  { id: 'u3', name: 'Julie' },
];

function App() {
  const usersContext = {
    users: DUMMY_USERS
  }

  return (
    <UsersContext.Provider value={usersContext}>
      <ErrorBoundary>
        <UserFinder />
      </ErrorBoundary>
    </UsersContext.Provider>
  );
}

export default App;

ErrorBoundary.js：

import React, { Component } from 'react';

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

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

    render() {
        if (this.state.hasError === true)
        {
            <p>Error Occured!</p>
        }
        return this.props.children;
    }
}

export default ErrorBoundary;

Users.js（我产生错误的地方）

import { Component } from 'react';
import User from './User';
import classes from './Users.module.css';

class Users extends Component {

  constructor() {
    super();
    this.state = {
      showUsers: true
    }
  }

  componentDidUpdate() {
    if (this.props.users.length === 0) {
      throw new Error('No user Provided');
    }
  }

  toggleUsersHandler() {
    this.setState((currState) => {
      return {
        showUsers: !currState.showUsers
      }
    });
  };

  render() {
    const usersList = (
      <ul>
        {this.props.users.map((user) => (
          <User key={user.id} name={user.name} />
        ))}
      </ul>
    );

    return (
      <div className={classes.users}>
        <button onClick={this.toggleUsersHandler.bind(this)}>
          {this.state.showUsers ? 'Hide' : 'Show'} Users
        </button>
        {this.state.showUsers && usersList}
      </div>
    );
  }
}

export default Users;

所以当我输入不在用户列表中的名称时，Users.js 会出错。我使用错误边界来显示一段说“出了点问题”。但是在产生错误时，我的屏幕会冻结，而不是显示一个段落。错误边界工作正常，因为我的应用程序没有崩溃（不像第一个屏幕截图那样显示空白屏幕），这次它只会冻结我的屏幕。

Answer 1

在ErrorBoundary 的render 方法中，您不要return 消息。

render() {
  if (this.state.hasError === true) {
    return <p>Error Occured!</p>;
  }
  return this.props.children;
}