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

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对此推文的阅读.

丹的鸣叫