Question

我有一个简单的反应组件，如下所示：

class Test extends React.Component {
  componentDidMount() {
    fetch('/some-url-here')
      .then((data) => {
        this.setState({ data });
      })
      .catch(() => {
        alert('failed to fetch');
      });
  }

  render() {
    // render the data here
  }
}

这个问题是catch不仅捕获了获取错误。它还捕获render中引发的任何异常！创建一个获取某些数据并处理获取错误的简单组件的正确方法是什么？

Answer 1

class Test extends React.Component {
  componentDidMount() {
    fetch('/some-url-here')
      .then((data) => {
        this.setState({ data });
      }, (error) => {
        if (error) {
          // handle error here
        }
      });
  }

  render() {
    // render the data here
  }
}

如果使用catch而不是第二个回调，则在setState方法期间可能发生的任何错误都将保持未处理状态。因此，您可以以自己的方式捕获渲染方法错误。有关更多信息，请阅读Dan Abramov对此推文的阅读。

Dan's Tweet

Answer 2

如果您使用的是React 16或更高版本，请考虑使用错误边界和componentDidCatch。 Dan Abramov博客的例子：

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

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

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

// Then you can use it as a regular component:

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

可能对您有所帮助的好资源：

在React中捕获fetch错误的正确方法？

2 个答案: