从嵌套循环中获取信息以有条件地渲染 jsx

Question

我有一个对象，我必须在其中循环两次以检查我应该在 react 中渲染什么。

我的尝试：

// categories is my nested object
const checkedCategories = [...categories];

for (let i = 0; i < categories.length; i++){
  for (let j =0; j < categories[i].products.length; j++){
    const currentImageType = categories[i].products[j].imageTypes;

    // get information from action in store(mobx) to check if image exists
    const image = images.getDefault(currImageType);

    if (image) {
      //error cannot add property visible, object is not extensible
      checkedCategories[i].visible = true;
    }
  }
}

const categoryTabs = checkedCategories.map((category, index) => {
  if (category.visible){
    return (
      <Product
          key={category.name}
          product={category.products}
       />
    )
  }
});

我想了解如何解决不可扩展对象的问题并仅渲染具有图像的问题（我从嵌套循环中获得的来自商店的信息）

Answer 1

您的循环中有错误。如果您将循环更改为以下内容，它应该可以工作。下面的代码更简洁，更容易推理。

const checkedCategories = [];
categories.forEach(cat => {
  let isVisible = false;
  cat.products.forEach(product => {
    const image = images.getDefault(product.imageTypes);
    isVisible = isVisible || !!image;

  });
  checkedCategories.push(Object.assign({}, cat, { visible: isVisible });
};