Question

我在名为App2的组件中通过访问null的属性长度引入了一个基本错误。但是我的errorboundary不会触发相同的结果。这是实况https://codepen.io/abhinavthinktank/pen/gEePPe的示例。我不确定为什么会发生这种情况

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

  componentDidCatch() {
    // Display fallback UI
    this.setState({ hasError: true });
  }

  render() {
    const { hasError } = this.state;
    const { children } = this.props;
    if (hasError) {
      return <div>ERRRORRRRRRRRRRRRRRRRRRRRRRRRRRR</div>;
    }
    return children;
  }
}


class App extends React.Component {
  render() {
    let test2 = null;
    return (
      <div>
        {test2.length}
        <h1>Hello, React and ES6!</h1>
        <p>Let's play. :)</p>
      </div>
    );
  }
}

const App2 = props => {
  return(
  <ErrorBoundary>
    <App/>
    </ErrorBoundary>
    )
}

ReactDOM.render(<App2 />, document.getElementById("app"));

Answer 1

问题是您使用的是React 15，但是React 16提供了错误边界，因此它无法正常工作。在这里，我更改了版本，现在可以正常工作了。 click here for codepen

// https://unpkg.com/react@16/umd/react.development.js
// https://unpkg.com/react-dom@16/umd/react-dom.development.js

为什么错误边界未在react组件中触发？

1 个答案: