javascript-如何在React错误边界中使用自定义错误类型？

2019-11-09 08:33:47 阅读：180 来源： 互联网

我在组件树的顶部设置了一个错误边界,如下所示：

renderApp() {
  return (
    <ErrorBoundary>
      { this.props.children }
    </ErrorBoundary>
  );
}

如果错误在树上找到,错误边界将呈现一个简单的错误页面,并将错误本身作为支持传递：

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

render() {
  if (this.state.hasError) {
    return (
      <ErrorPage error={this.state.error}/>
    );
  }
  return this.props.children;
}

我已经开始定义自定义错误,以便在引发某些异常时抛出应用程序错误,只需扩展Error类即可：

class CustomError extends Error {}

然后在我的组件中,抛出这些自定义错误,我想在我的错误页面中检测这些错误,并根据它们的类型构造消息传递.例如,如果我在组件树中进一步抛出此错误：

throw new CustomError('This is the custom error message');

我希望能够在错误页面上嗅探该类型,并显示与该类型相关的消息.

import CustomError from '../../errors/custom-error';

// This code has obviously been edited for brevity's sake

class ErrorPage extends React.Component {
  render() {
    if (this.props.error instanceof CustomError) {
      errorMessage = "A custom error occurred.";
    }
    return <div>{errorMessage}</div>;
  }
}

但是,在错误页面中,React只识别出this.props.error是Error的实例,而不是CustomError的实例.如果我抛出一个TypeError而不是一个CustomError,那么错误页面可以检测到错误类型.但是,传递自定义错误类型会导致错误页面对错误类型一无所知,而这是一个错误,这显然会破坏定义自定义错误类型的目的.我在这里想念什么？这是React中的错误吗？任何输入将不胜感激.

我使用React 16.0.0发现了这个问题,已经更新到16.2.0,问题仍然存在.

解决方法:

问题不在于React,而是与Babel有关,我认为您正在使用.类的编译方式不支持将instanceof与扩展了Error等本机类的类一起使用.

您可以在此处看到该行为的示例：https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&code_lz=MYGwhgzhAEDCCuEAuB7AtgUQE5ZV6ApgB5IEB2AJjNrvgN4C-A3AFDApnLRjQC80ZAgHc4iVJhx4AFAEpW7TihAEAdCBQBzKTwCWnJGDLACKAGajk6GnjlA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=true&fileSize=false&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=6.26.0&envVersion=

有关更多信息,请参见此Babel问题：https://github.com/babel/babel/issues/3083

标签：reactjs,javascript
来源： https://codeday.me/bug/20191109/2012935.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-如何在React错误边界中使用自定义错误类型？