我有一个简单的反应组件,如下所示：
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不只是捕获fetch错误.它还捕获渲染中抛出的任何异常！创建一个获取某些数据并处理获取错误的简单组件的正确方法是什么？
解决方法
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对此推文的阅读.
