面试题答案
一键面试- 定义错误边界组件:
- 在React中,错误边界是一个类组件,它可以捕获子组件树中在渲染、生命周期方法和构造函数中抛出的错误。
- 示例代码如下:
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } componentDidCatch(error, errorInfo) { // 记录错误日志,便于调试 console.log('Error caught:', error, errorInfo); this.setState({ hasError: true }); } render() { if (this.state.hasError) { // 返回错误提示界面 return <div>An error occurred. Please try again later.</div>; } return this.props.children; } }
- 在异步请求中使用错误边界:
- 当使用
fetch
进行异步请求时,可以将相关的组件包裹在错误边界组件内。 - 假设我们有一个
DataFetcher
组件来处理fetch
请求:
class DataFetcher extends React.Component { constructor(props) { super(props); this.state = { data: null }; } componentDidMount() { this.fetchData(); } fetchData = async () => { try { const response = await fetch('/api/data'); if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); this.setState({ data }); } catch (error) { throw error; // 抛出错误,让错误边界捕获 } }; render() { return ( <div> {this.state.data? ( <div>{JSON.stringify(this.state.data)}</div> ) : ( <div>Loading...</div> )} </div> ); } }
- 在应用中使用时,将
DataFetcher
组件包裹在错误边界组件内:
const App = () => { return ( <ErrorBoundary> <DataFetcher /> </ErrorBoundary> ); };
- 当使用
- 处理多个并发异步请求:
- 对于多个并发异步请求,可以分别将每个请求的组件包裹在错误边界组件内,这样每个请求的错误可以独立处理。
- 例如,假设有两个并发请求的组件
DataFetcher1
和DataFetcher2
:
const App = () => { return ( <div> <ErrorBoundary> <DataFetcher1 /> </ErrorBoundary> <ErrorBoundary> <DataFetcher2 /> </ErrorBoundary> </div> ); };
- 为了避免重复渲染,可以在错误边界组件内部进行优化。例如,在
componentDidCatch
方法中,只在第一次捕获到错误时更新状态,后续相同组件的错误不再触发状态更新。可以通过记录已捕获错误的组件标识来实现:
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; this.capturedErrorComponents = new Set(); } componentDidCatch(error, errorInfo) { const componentKey = this.props.children.key; if (!this.capturedErrorComponents.has(componentKey)) { this.capturedErrorComponents.add(componentKey); console.log('Error caught:', error, errorInfo); this.setState({ hasError: true }); } } render() { if (this.state.hasError) { return <div>An error occurred. Please try again later.</div>; } return this.props.children; } }
通过上述方式,可以合理地使用错误边界来捕获并处理异步操作中的错误,同时有效地管理多个并发异步请求的错误,避免重复渲染等问题。