反应错误边界和延迟计算

Question

在这种情况下：

const A = () => (
  <B 
    calc={() => {throw Error('error!')}
  />
);

const B = ({calc}) => (
  <ErrorBoundry>
    <div>result: {calc()}</div>
  </ErrorBoundry>
);

（假设ErrorBoundry是react文档中的经典，简单的ErrorBoundry） 我看到错误没有被错误边界捕获。如果我将错误边界放在A中：

const A = () => (
  <ErrorBoundry>
    <B 
      calc={() => {throw Error('error!')}
    />
  </ErrorBoundry>
);

const B = ({calc}) => (
  <div>result: {calc()}</div>
);

它将被捕获在A中。 这让我有些困惑，因为计算实际上是在B的渲染上进行的，而不是在A的渲染上进行的。 因此我无法理解为什么在B中使用ErrorBoundry不能捕获错误。

Answer 1

为简化此处的操作，组件A2将捕获错误，而A则不会。

A之所以不会捕获错误（您的情况中的第一种情况）的原因是，就像提到的in the docs一样，错误边界是React组件，可在其任何地方捕获JavaScript错误子组件树。

div不被视为component。

const calc = () => {
  throw Error("error!");
};

const A = () => (
  <ErrorBoundary>
    <div>result: {calc()}</div>;
  </ErrorBoundary>
);

const A2 = () => (
  <ErrorBoundary>
    <B calc={calc} />
  </ErrorBoundary>
);

const B = ({ calc }) => <div>result: {calc()}</div>;

const App = () => {
  return (
    <>
      {/* <A /> */}
      <A2 />
    </>
  );
};