时间戳

首页 > 解决方案 > DOMException：无法在“节点”上执行“removeChild”。使用地图渲染组件时

javascript - DOMException：无法在“节点”上执行“removeChild”。使用地图渲染组件时

问题描述

我有一个问题，因为我有一个 Map，它的作用是从 Tree 中获取值并将其传递给组件。该组件是一个类别滑块，带有产品。

所以当服务响应非常快时，它没有完成第一次渲染组件并启动另一个组件，我该如何处理呢？

const getProductsWithTree = () => {
if(ifExistAndMayorToZero(tree)) {
  return (
    tree.map((category:any) => {
      return (
        <GlobalComponents.ProductSliderAsync
          filterBrand={false}
          singleProviderId={vendorId}
          category={category}
          hideMore={true}
          isLoading={isLoadingProducts}
          brandId={brandId}
          validateIfIsHasProducts={ifIsHasProducts}
          {...props}
        />
      )
    })
  )
}
}

我想出了一些东西，比如知道我什么时候回来处理地图，但我不知道。

这不起作用并且发生错误，当它响应非常快时，如果我放慢连接，它在那里工作没有问题。

标签： javascriptreactjs

解决方案

如果“服务”指的是树的来源，您可以将树存储在状态中，以便在树更改时重新渲染滑块。

如果它引用的外部服务导致另一个组件在滑块完成与树的渲染之前渲染在滑块上，您可以推迟渲染所述第二个组件（“另一个”），直到滑块完成渲染之后.

第二种情况的简单概念化：

如果一个组件影响另一个组件的渲染，大概它们共享一个条件逻辑。

也许您可以通过让 ProductSlider 更新存储中的值（我们称之为sliderRenderIsDone）来优化条件并将其添加到共享条件中：

{ treeIsReady
    ? sliderRenderIsDone ? OtherComponent : ProductSlider
    : null 
}

推荐阅读