Получить информацию из вложенного цикла для условного рендеринга jsx

Question

У меня есть объект, в котором я должен выполнить цикл два раза, чтобы проверить, что я должен сделать в реакции.

Мои попытки:

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