文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >反应。在DOM中崩溃后不显示错误信息

问反应。在DOM中崩溃后不显示错误信息
EN

Stack Overflow用户
提问于 2018-03-05 00:07:19
回答 3查看 715关注 0票数 0

我做了一个简单的测试来捕获来自MyComponent组件的错误，但是在崩溃之后，错误信息没有显示在DOM中，而是在下面的代码中描述。在控制台中，它显示正常。

代码语言：javascript
复制
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import './index.css';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      counter: 0,
      error: null,
      errorInfo: null
    };
  }

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

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

  }

  render() {
    if (this.state.counter > 5) {
      throw new Error('Ooops!');
      return(
        <React.Fragment> // this is were Error must displayed 
        <div>{this.state.error.toString()}</div>
        <div>{this.state.errorInfo.componentStack}</div>
        </React.Fragment>
      );
    }
    return <div style={{cursor: 'pointer'}} onClick={this.handleClick}>Click Me: {this.state.counter}</div>
  }
}

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

/控制台中的错误日志：

代码语言：javascript
复制
    Uncaught Error: Ooops!
    at MyComponent.render (index.js:30)
    at finishClassComponent (react-dom.development.js:7873)
    at updateClassComponent (react-dom.development.js:7850)
    at beginWork (react-dom.development.js:8225)
    at performUnitOfWork (react-dom.development.js:10224)
    at workLoop (react-dom.development.js:10288)
    at HTMLUnknownElement.callCallback (react-dom.development.js:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
    at invokeGuardedCallback (react-dom.development.js:438)
    at renderRoot (react-dom.development.js:10366)
    at performWorkOnRoot (react-dom.development.js:11014)
    at performWork (react-dom.development.js:10967)
    at batchedUpdates (react-dom.development.js:11086)
    at batchedUpdates (react-dom.development.js:2330)
    at dispatchEvent (react-dom.development.js:3421)
render @ index.js:30
finishClassComponent @ react-dom.development.js:7873
updateClassComponent @ react-dom.development.js:7850
beginWork @ react-dom.development.js:8225
performUnitOfWork @ react-dom.development.js:10224
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421
index.js:2178 The above error occurred in the <MyComponent> component:
    in MyComponent (at index.js:43)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit s to learn more about error boundaries.
__stack_frame_overlay_proxy_console__ @ index.js:2178
logCapturedError @ react-dom.development.js:9747
captureError @ react-dom.development.js:10540
renderRoot @ react-dom.development.js:10391
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
batchedUpdates @ react-dom.development.js:11086
batchedUpdates @ react-dom.development.js:2330
dispatchEvent @ react-dom.development.js:3421
index.js:30 Uncaught Error: Ooops!
    at MyComponent.render (index.js:30)
    at finishClassComponent (react-dom.development.js:7873)
    at updateClassComponent (react-dom.development.js:7850)
    at beginWork (react-dom.development.js:8225)
    at performUnitOfWork (react-dom.development.js:10224)
    at workLoop (react-dom.development.js:10288)
    at HTMLUnknownElement.callCallback (react-dom.development.js:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
    at invokeGuardedCallback (react-dom.development.js:438)
    at renderRoot (react-dom.development.js:10366)
    at performWorkOnRoot (react-dom.development.js:11014)
    at performWork (react-dom.development.js:10967)
    at batchedUpdates (react-dom.development.js:11086)
    at batchedUpdates (react-dom.development.js:2330)
    at dispatchEvent (react-dom.development.js:3421)

/

reactjs
javascript
EN

回答 3

Stack Overflow用户

发布于 2018-03-05 00:21:10

当您之前抛出错误时，可能不会引发显示错误的html。试着这样做：

代码语言：javascript
复制
render() {
  if (this.state.counter > 5) {
    throw new Error('Ooops!');
  }
  return (
    <div>
    <div style={{cursor: 'pointer'}} onClick={this.handleClick}>Click Me: {this.state.counter}</div>
      { this.state.error &&
        <React.Fragment>
          <div>{this.state.error.toString()}</div>
          <div>{this.state.errorInfo.componentStack}</div>
        </React.Fragment>
      }
    </div>
  );
}
票数 0
EN

Stack Overflow用户

发布于 2018-03-05 00:22:38

我认为这段代码不起作用，因为当你抛出一个错误时，函数中Javascript的执行就会停止：

代码语言：javascript
复制
render() {
  if (this.state.counter > 5) {
    throw new Error('Ooops!');

    // HERE, after the Error, the exution is stopped, and all the code below is ignored.

    return(
      <React.Fragment> // this is were Error must displayed 
        <div>{this.state.error.toString()}</div>
        <div>{this.state.errorInfo.componentStack}</div>
      </React.Fragment>
    );
  }
  return <div style={{cursor: 'pointer'}} onClick={this.handleClick}>Click Me: {this.state.counter}</div>
}

您可以做的是在抛出错误时使用try/catch块，或者如果错误信息存在，则只呈现错误信息，例如：

代码语言：javascript
复制
render() {
  if (this.state.error) {
    return(
      <React.Fragment> // this is were Error must displayed 
        <div>{this.state.error.toString()}</div>
        <div>{this.state.errorInfo.componentStack}</div>
      </React.Fragment>
    );
  }
  if (this.state.counter > 5) {
    throw new Error('Ooops!');
  }
  return <div style={{cursor: 'pointer'}} onClick={this.handleClick}>Click Me: {this.state.counter}</div>
}
票数 0
EN

Stack Overflow用户

发布于 2018-03-05 00:47:43

这就是您可以做的--在错误检查器MyComponent组件中包含可执行的Component组件。这将是一项工作：

代码语言：javascript
复制
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
      error: null,
      errorInfo: null
    };
  }

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

  render() {
    if (this.state.errorInfo) {
      return(
        <React.Fragment>
          <div>{this.state.error && this.state.error.toString()}</div>
          <div>{this.state.errorInfo.componentStack}</div>
        </React.Fragment>
      );
    }   
    return this.props.children;
  }
}

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

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

  render() {
    if (this.state.counter > 5) {
      throw new Error('Ooops!');
    }
    return <div style={{cursor: 'pointer'}} onClick={this.handleClick}>Click Me: {this.state.counter}</div>
  }
}

ReactDOM.render(
  <MyComponent>
    <Component />
  </MyComponent>,
  document.getElementById('root')
);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/49097373

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档