javascript ComponentDidCatch 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47223765/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ComponentDidCatch does not work
提问by Dmitry Kotelewsky
Why componentDidCatchdoes not work in my react-native app.
componentDidCatchdoes not handle errors.
为什么componentDidCatch在我的本机应用程序中不起作用。
componentDidCatch不处理错误。
React native v: 50.3
React: 16.0.0
import React, {Component} from 'react';
import {View, Text} from 'react-native';
import Logo from './SignUpInit/Logo';
import SignUp from './SignUpInit/SignUp';
import Social from './SignUpInit/Social';
import styles from './SignUpInit/styles';
export default class SignUpInit extends Component {
state = {
componentCrashed: false,
count: 0,
}
componentDidCatch(error, info) {
console.log(error);
console.log(info);
console.log('_______DID CATCH____________');
this.setState({componentCrashed: true});
}
componentDidMount(){
setInterval(()=>this.setState({count: this.state.count+1}),1000);
}
render() {
if (this.state.componentCrashed) {
return (
<View>
<Text>
Error in component "SingUpInit"
</Text>
</View>
);
}
if(this.state.count > 5){
throw new Error('Error error error');
}
return (
<View style={styles.main}>
<Logo/>
<SignUp/>
<Social/>
</View>
);
}
}回答by Chris
This doesn't work because componentDidCatch()only works for catching errors thrown by a components children. Here it seems like you are trying to catch an error thrown by the same component - that's not going to work.
这不起作用，因为componentDidCatch()仅适用于捕获子组件抛出的错误。在这里，您似乎正在尝试捕获由同一组件引发的错误 - 这是行不通的。
See the official documentationfor more info:
有关更多信息，请参阅官方文档：
Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UIinstead of the component tree that crashed.
错误边界是 React 组件，它在其子组件树中的任何位置捕获 JavaScript 错误，记录这些错误，并显示回退 UI而不是崩溃的组件树。
Note the "anywhere in their child component tree".
注意“在他们的子组件树中的任何地方”。
So all you need to do is to wrap your component inside another component that manages all errors thrown. Something like:
因此，您需要做的就是将您的组件包装在另一个管理抛出的所有错误的组件中。就像是：
<ErrorBoundary>
<SignUpInit />
</ErrorBoundary>
Where <ErrorBoundary />is something as simple as:
哪里<ErrorBoundary />有这么简单的事情：
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = {hasError: false};
}
componentDidCatch(error, info) {
this.setState({hasError: true});
}
render() {
if(this.state.hasError) return <div>Error!</div>;
return this.props.children;
}
}
