React错误边界未捕获子组件属性访问错误，求分析原因

问题场景 #

ChatPage组件中，当chats状态初始为null时，访问chats.chat会抛出错误，但该错误并未被外层的ErrorBoundary组件捕获。

相关代码 #

ChatPage组件 #

import React from 'react'
import axios from 'axios'
import ErrorBoundary from './ErrorBoundary'
const ChatPage = () => {
  const fetchChats= async()=>{
      const data=await axios.get('/api/getChats')
      return data
  }
  
  const [chats, setChats]=React.useState(null)
  React.useEffect(()=>{
    fetchChats().then((res)=>{
     setChats(res.data)
    })
  ;
  },[])
  return (
    <>
    <div>ChatPage</div>
    <ErrorBoundary> <div>{chats.chat}</div></ErrorBoundary>
   
    </>
  )
}

export default ChatPage

ErrorBoundary组件 #

import React from 'react'
class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { hasError: false };
    }
  
    static getDerivedStateFromError(error) {
      // Update state so the next render will show the fallback UI.
      return { hasError: true };
    }
  
    componentDidCatch(error, errorInfo) {
      // You can also log the error to an error reporting service
    
    }
  
    render() {
      if (this.state.hasError) {
        // You can render any custom fallback UI
        return <h1>Something went wrong.</h1>;
      }
  
      return this.props.children; 
    }
  }
  export default ErrorBoundary

原因解析 #

1. 错误发生在ErrorBoundary的props计算阶段
   当前代码中，{chats.chat}是作为ErrorBoundary的children属性的一部分，在ChatPage组件的渲染过程中被计算的。这个错误抛出在ChatPage的渲染上下文里，而ErrorBoundary是ChatPage的子组件，无法捕获父组件渲染时产生的错误。

2. ErrorBoundary的捕获范围限制
   React的ErrorBoundary只能捕获自身子组件树内部的渲染错误、生命周期方法错误以及构造函数错误。只有当错误从ErrorBoundary直接包裹的子组件（而非props中的表达式）中抛出时，才能被捕获。

解决方案 #

将可能抛出错误的UI部分封装成独立组件，让ErrorBoundary直接包裹这个组件，确保错误发生在ErrorBoundary的子组件树中：

import React from 'react'
import axios from 'axios'
import ErrorBoundary from './ErrorBoundary'

// 封装独立组件承载可能出错的UI
const ChatDisplay = ({ chats }) => {
  return <div>{chats.chat}</div>
}

const ChatPage = () => {
  const fetchChats= async()=>{
      const data=await axios.get('/api/getChats')
      return data
  }
  
  const [chats, setChats]=React.useState(null)
  React.useEffect(()=>{
    fetchChats().then((res)=>{
     setChats(res.data)
    })
  },[])
  
  return (
    <>
      <div>ChatPage</div>
      <ErrorBoundary>
        <ChatDisplay chats={chats} />
      </ErrorBoundary>
    </>
  )
}

export default ChatPage

这样修改后，当chats为null时，ChatDisplay组件渲染抛出的错误会被ErrorBoundary正常捕获，并显示备用UI。

内容的提问来源于stack exchange，提问作者Saad Farooq