Почему граница ошибки не срабатывает в компоненте реакции? - PullRequest
0 голосов
/ 15 марта 2019

Я внес базовую ошибку, получив доступ к свойству length с нулем, в моем компоненте под названием App2. Но моя ошибка границы не срабатывает для того же. Вот пример в прямом эфире 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"));

1 Ответ

1 голос
/ 15 марта 2019

Проблема в том, что вы используете реакцию 15, но граница реакции доступна из реакции 16, поэтому она не работает. Здесь я изменил версию, теперь она отлично работает. нажмите здесь для получения кода

// https://unpkg.com/react@16/umd/react.development.js
// https://unpkg.com/react-dom@16/umd/react-dom.development.js
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...