Как использовать React границу ошибки с обещаниями - PullRequest
Новая
       11

Как использовать React границу ошибки с обещаниями

0 голосов
/ 13 марта 2020

Я пытаюсь реализовать обобщенную страницу ошибки c для любых необработанных исключений в приложении React. Однако кажется, что граница ошибки не работает с исключениями, создаваемыми обещаниями, такими как операции API. Я знаю, что могу перехватить исключение на уровне компонента и повторно выдать его при методе рендеринга. Но это шаблон, который я хотел бы избежать. Как использовать границу ошибки с обещаниями?

Я использую последнюю версию React с перехватчиками и реакции-маршрутизатором для навигации.

1 Ответ

0 голосов
/ 13 марта 2020

Вы можете создать HO C, который будет принимать два параметра. Первый - это компонент, а второй - обещание. и он вернет ответ и загрузку в реквизитах. Пожалуйста, найдите код для справки ниже.

HO C

import React, { Component } from "react";
function withErrorBoundary(WrappedComponent, Api) {
  return class ErrorBoundary extends Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false, response: null, loading: false };
    }
    async componentDidMount() {
      try {
        this.setState({
          loading: true
        });
        const response = await Api;

        this.setState({
          loading: false,
          response
        });
        console.log("response", response, Api);
      } catch (error) {
        // throw error here
        this.setState({
          loading: false
        });
      }
    }
    static getDerivedStateFromError(error) {
      // Update state so the next render will show the fallback UI.
      return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {
      // You can also log the error to an error reporting service
    }

    render() {
      if (this.state.hasError) {
        // You can render any custom fallback UI
        return <h1>Something went wrong.</h1>;
      }

      return (
        <WrappedComponent
          response={this.state.response}
          loading={this.state.loading}
          {...this.props}
        />
      );
    }
  };
}
export default withErrorBoundary;

Как использовать HO C

import ReactDOM from "react-dom";
import React, { Component } from "react";
import withErrorBoundary from "./Error";

class Todo extends Component {
  render() {
    console.log("this.props.response", this.props.response);
    console.log("this.props.loading", this.props.loading);
    return <div>hello</div>;
  }
}
const Comp = withErrorBoundary(
  Todo,
  fetch("https://jsonplaceholder.typicode.com/todos/1").then(response =>
    response.json()
  )
);

ReactDOM.render(<Comp />, document.getElementById("root"));

Пожалуйста, проверьте коды и поле для вашей ссылки

...