0

我在 Magento PWA 中调用了一个名为 cmsBlock 的通用组件。我不能对该组件进行太多更改，因为它在许多页面中使用。但是，在我的 CartPage 上，如果 CMS 块抛出错误（即 CMS 块被禁用并且找不到标识符），我想呈现 null。

问题是在 cmsBlock.js 中，一个错误实际上呈现了一些东西（我可以添加一个类名，但这基本上是我可以对那个组件做的所有事情，所以不能在 csmBlock 上使用 ErrorBoundary）所以我无法检查 null 或 undefined ：

 const { loading, error, data } = useQuery(GET_CMS_BLOCKS, {
    variables: { identifiers }
});

if (loading) {
    return fullPageLoadingIndicator;
}

if (error) {
    return <div>Data Fetch Error</div>;
}

所以这意味着我在调用 CMS 块时总是正确的。在我的购物车页面中，我尝试了这个（cartPage.js）：

const cmsBlock = <CmsBlock identifiers={'cartpage-block'} />;

const cmsBlockHolder =
    cmsBlock ? (
        <div className={classes.cmsblock}>              
        </div>
    ) : null;

但是我需要添加一个额外的条件来检查 cmsBlock 组件是否返回错误，因为我根本不应该允许渲染 cmsBlockHolder。关于如何在不更改 cmsBlock.js 的情况下解决此问题的任何想法？

4

1 回答 1

0

这听起来像您在寻找Error Boundaries。引用反应文档：

错误边界的工作方式类似于 JavaScript catch {} 块，但对于组件

您需要做的是定义一个包含生命周期方法getDerivedStateFromError()的新组件。如果子组件抛出错误，您可以在那里呈现回退 UI。对于您的用例，它可能看起来像这样：

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 };
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return null;
    }
    return this.props.children;
  }
}

您的组件组合将如下所示：

<ErrorBoundary>
  <CmsBlock />
</ErrorBoundary>
于 2021-01-26T13:50:36.410 回答