React js Error Boundary не работает с Promise Catch - PullRequest
Новая
       8

React js Error Boundary не работает с Promise Catch

0 голосов
/ 15 сентября 2018

У нас есть компонент Граница ошибки: 

import React from 'react';
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorMessage:''};
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true, errorMessage: error });
    // You can also log the error to an error reporting service
  }

  render() {
    if (this.state.hasError) {
      debugger
      // You can render any custom fallback UI  
      return <h1>{this.state.errorMessage.toString()}</h1>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

И мы используем это так: 

ReactDOM.render(
    <Provider store={store}>
        <Router>
            <CookiesProvider>
                <ErrorBoundary>
                    <NetworkMgmt />
                </ErrorBoundary>
            </CookiesProvider>
        </Router>
    </Provider>,
     document.getElementById('root')
);

После этого я пытаюсь выдать ошибку, используя приведенный ниже фрагмент кода, но это не вызывает Error Boundary componentDidCatch (), вместо этого он генерирует необработанное исключение. 

    dataService.getNetworkSummary().then(function (result) {
        debugger
        self.networks = result;
        self.setState({
            items: result.slice(0, 20),
            total: result.length,
            skip: 0,
            pageSize: 20,
            pageable: {
                buttonCount: 5,
                info: true,
                type: 'numeric',
                pageSizes: [20, 40, 60, 80, 100],
                previousNext: true
            },
            sortable:{
                allowUnsort: true,
                mode: 'single',
                sortDir:'Asc'
            }

        })
    }).catch(err =>
         {
             throw new Error("This is my error");
         });

Есть ли способ, которым мы можем сделать это правильно.

1 Ответ

0 голосов
/ 15 сентября 2018

Как и в обещании, вы улавливаете ошибку, это означает, что она не будет отображать ошибку в компоненте, потому что вы уже обработали ошибку в функции. Цель catch - обработать ошибку, чтобы в этом блоке не беспокоил компонент. Если вы хотите выдать ошибку вручную, вы можете использовать 

throw 'Some Error';

или вы можете удалить блокирующую защелку, которую я бы не рекомендовал.

ОБНОВЛЕНИЕ: Границы ошибок перехватывают ошибки во время рендеринга, в методах жизненного цикла и в конструкторах всего дерева под ними.

...