Реагировать - цикл внутри цикла не рендеринг

Question

У меня есть цикл карты внутри другого цикла, например:

{"undefined" !== typeof this.props.categoryObject['products'] && Object.keys(this.props.categoryObject['products']).length > 0 && Object.keys(this.props.categoryObject['products']).map(keyProd => {
    const product = this.props.categoryObject['products'][keyProd];
    if("undefined" !== typeof product) {
        Object.keys(this.props.activeFilters).map(keyFilter => {     
            console.warn(this.props.activeFilters[keyFilter]);
            return (<div>test</div>)
        })
    }
})}

Консоль работает, но не рендер. Есть идеи почему?

Спасибо

Answer 1

Проблема здесь в том, что у внешнего .map нет оператора return, а у вашего внешнего кода тоже нет оператора return.

Поэтому вы должны изменить свой код на следующий

return ("undefined" !== typeof this.props.categoryObject['products'] && Object.keys(this.props.categoryObject['products']).length > 0 && Object.keys(this.props.categoryObject['products']).map(keyProd => {
    const product = this.props.categoryObject['products'][keyProd];
    if("undefined" !== typeof product) {
        return Object.keys(this.props.activeFilters).map(keyFilter => {     
            console.warn(this.props.activeFilters[keyFilter]);
            return (<div>test</div>)
        })
    }
}))

Также несколько заметок о том, как сделать код более читабельным с помощью новых функций es6. Прокомментированная версия

// It's better to extract products into separate variable 
// as there are a lot of copy paste code for this action
const { products } = this.props.categoryObject;

// `undefined` is falsy value so you can just test next condition for early exit
if (!products) { return null; }

// 1. no need to test for `.length` as iterating empty array will make 0 iterations
// 2. use Object.entries you can immediately get key and value
return Object.entries(products).map(([key, product]) => {
  // Same things as with `products` variable
  if (product) {
    // I think for your future code you can use `Object.entries` here too
    return Object.keys(this.props.activeFilters).map(keyFilter => {     
      return (<div>test</div>)
    })
  }
})

Окончательная версия:

const { products } = this.props.categoryObject;
if (!products) { return null; }

return Object.entries(products).map(([key, product]) => {
  if (product) {
    return Object.keys(this.props.activeFilters).map(keyFilter => {     
      return (<div>test</div>)
    })
  }
})

ПРИМЕЧАНИЕ Чтобы использовать их все во всех распространенных браузерах, вам необходимо правильно настроить babel