javascript - 当 Promise 被拒绝时如何触发 React 错误边界？

Question

我遇到的问题是，promise 中抛出的错误没有被错误边界组件捕获。

该代码从服务器获取数据并使用状态代码来确定如何处理来自响应的数据。 axios用作客户端，并设置拦截器来处理响应。

API.interceptors.response.use((response) => {
  switch (response.status) {
    case 500:
    case 403:
      throw new Promise((resolve) => resolve(response.status));
  }
});

我设置了ErrorBoundary组件捕获其子组件中引发的错误:

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

  componentDidCatch(error) {
    this.setState({
      hasError: true,
    });

    if (error instanceof Promise) {
      error.then(() => console.log(error));
    } else {
      console.log(error);
    }
  }

  render() {
    return this.state.hasError ? (
      <span>Something went wrong but it is okay</span>
    ) : (
      this.props.children
    );
  }
}

它被用作:

<ErrorBoundary>
  <Child />
</ErrorBoundary>

Child组件从 componentDidMount 中的服务器获取一些数据方法。

componentDidMount() {
  API.getData().then((data) => {
    ...
  });
}

当服务器以导致 Promise 的状态码响应时被抛出，ErrorBoundary组件应该捕获它，但它没有。如果在 componentDidMount 内显式抛出错误方法，然后错误边界做出相应的 react 。例如:

componentDidMount() {
  throw new Error(); 
  // or throw new Promise(resolve => resolve());
}

总是可以用 catch 捕获错误。但是有没有办法让 ErrorBoundary 捕获这些错误？零件？

Answer 1

你可以试试react-error-boundary npm 包。他们有 useErrorHandler处理异步代码的钩子(Hook)。
请参阅此页面了解更多信息 - https://github.com/bvaughn/react-error-boundary#useerrorhandlererror-error