d2321
2/15/2020 - 10:31 PM

Errors

import React, { Component } from "react";

class ErrorBoundary extends Component {
  state = {
    hasError: false,
    errorMessage: ""
  };

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

  render() {
    if (this.state.hasError) {
      return <h1>{this.state.errorMessage}</h1>;
    } else {
      return this.props.children;
    }
  }
}

export default ErrorBoundary;
import React from "react";
import classes from "./Person.css";

const person = props => {

  const rnd = Math.random();
  if (rnd > 0.7) {
    throw new Error("Something went wrong");
  }

  return (
      ...
  );
};

export default person;
return (
  <ErrorBoundary key={person.id}>
    <Person
      name={person.name}
      age={person.age}
      click={() => this.deletePersonalHandler(index)}
      //нужно для реакта, чтобы он более еффективно ререндерил компоненты, значение должно быть уник
      changed={event => this.nameChangedHandler(event, person.id)}
    >
      {index}
    </Person>
  </ErrorBoundary>
);