reactjs - React ErrorBoundary 不适用于渲染异常

Question

我按照此处所述实现了 React 错误边界：https ://reactjs.org/docs/error-boundaries.html

当函数组件中产生异常时，它按预期工作，但是，今天我得到一个白屏，我只是注意到异常来自组件的 Render 部分。

这是我的 ErrorBoundary 组件：

  export class ErrorBoundary extends React.Component {  
  static getDerivedStateFromError(error: Error) {
    console.error(error);
  }
  render() {
    return this.props.children; 
  }
}

其实现如下：

export default function App() {
 return (
 <ErrorBoundary>
    <ChildComponent />
 </ErrorBoundary>
);
}

子组件：

interface Item {
      name: string;
      value: number;
   }

export const ChildComponent: React.FC = () => {
 const [collection, setCollection] = useState<Item[]>([]);
 
 return (
 <>
   <button
     onClick={() => console.log(collection[0].name)}>//this throws a console.error but the component keep mounted correctly
     Click
     {collection[0].name}//this throws a console.error and a white screen
   </button>
 </>
);
}

我想知道我能做些什么来处理这种类型的异常，因为不可避免地会出现这些可能出现错误且白屏不理想的情况。