javascript - 将 ErrorBoundary 与异步生命周期函数一起使用

Question

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

这是函数当前的样子(用 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 函数返回包装在 ErrorBoundary 组件中的标记，该组件实现了 componentDidCatch。 但是，当等待的调用被拒绝并且我最终进入 catch block 时，这永远不会被调用/触发。

我在这里错过了什么？

Answer 1

async 函数是返回 promise 的常规函数​​的语法糖。 async 函数中的错误会导致 promise 被拒绝。即使拒绝的 promise 没有在任何地方处理并导致 Uncaught (in promise) 错误，它也不会被错误边界捕获。

作为the reference州，

Error boundaries do not catch errors for: <...> Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)

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

安example :

  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>
    );
  }