将ErrorBoundary与异步生命周期函数结合使用

Question

我想构建一个在componentDidMount上异步加载数据的React组件。

这是该函数当前的样子(用TypeScript编写)：

async componentDidMount(): Promise<void> {
    try {
        const { props: { teamId }, state: { } } = this;
        const awaitableData = await UrlHelper.getDataAsync("some-fancy-url");

        // ... do something with awaitableData
    } catch(e) {
        console.log("Some error occured");
        throw e;
    }
}

render-function返回包装在ErrorBoundary组件中的标记，该组件实现了componentDidCatch。但是，当等待的调用被拒绝，并且我在catch-block中结束时，这将不会被调用/触发。

我在这里错过了什么？

Answer 1

async函数是返回承诺的正则函数的语法糖。async函数中的一个错误导致拒绝承诺。即使拒绝承诺不会在任何地方被处理，并导致Uncaught (in promise)错误，它也不会被错误边界所捕获。

正如参考文献所说，

错误边界不会捕获错误：<...>异步代码(例如，setTimeout或requestAnimationFrame回调)

一种解决方案是在错误时更改组件状态，并在下一次呈现时处理它。render是可以同步重新抛出错误的地方。

示例

  state = { error: null };

  async componentDidMount() {
    try {
      await new Promise(resolve => setTimeout(resolve, 2000));
      throw new Error('Foo error');
    } catch (error) {
      this.setState({ error });
    }
  }

  render() {
    if (this.state.error) {
      throw this.state.error;
    }

    return (
      <p>Foo</p>
    );
  }

Answer 2

让我们来看看文档

它基本上写着：

错误边界是将JavaScript错误捕获到其子组件树中的任何位置的组件，记录这些错误，并显示一个备用UI，而不是崩溃的组件树。错误边界在呈现过程中、生命周期方法中以及它们下面的整个树的构造函数中捕获错误。

因此，基本上，当您尝试使用ASYNC/AWAIT而它失败时，它将退出您的函数的CATCH方面：

catch(e) {
    console.log("Some error occured");
    throw e;
}

componentDidMount将不会抛出错误。实际上，如果您移除try catch方法，componentDidMount将处理错误。