Как правильно разбить массив на чанки?

Question

[deantek]

Как правильно разбить массив, чтобы засунуть все это добро в слайдер?



сейчас мне приходит массив с категориями, я попытался сделать это так

const TopCategories = (props: Props) => {
  const { t, categories } = props

  const cloneArr = categories

  let chunckArr = []
  let size = 8

  while (cloneArr.length > 0) chunckArr.push(cloneArr.splice(0, size))

  const firstSlide = chunckArr[0].map((item) => {
    return (
      <NavLink
        key={item.id}
        to={`/shop/category/${item.slug}`}
        className={`${s.top_categ_item} link external`}
      >
        <div className={s.cart_icon}>
          <img
            src={item.photo_mini ? item.photo_mini : 'photo'}
            alt=""
            onError={(e: any) => {
              e.target.onerror = null
              e.target.src = '/icons/product-without-photo.png'
            }}
          />
        </div>
        <div className={s.cart_name}>{item.name}</div>
      </NavLink>
    )
  })

  const secondSlide = chunckArr[1].map((item) => {
    return (
      <NavLink
        key={item.id}
        to={`/shop/category/${item.slug}`}
        className={`${s.top_categ_item} link external`}
      >
        <div className={s.cart_icon}>
          <img
            src={item.photo_mini ? item.photo_mini : 'photo'}
            alt=""
            onError={(e: any) => {
              e.target.onerror = null
              e.target.src = 'https://cdn.wish.men/icons/product-without-photo.png'
            }}
          />
        </div>
        <div className={s.cart_name}>{item.name}</div>
      </NavLink>
    )
  })

  return (
    <div className={`${s.market__item} ${s.top_category}`}>
      <div className={s.category_title}>{t('shop_page.top_categories')}</div>
      <Swiper
        spaceBetween={5}
        slidesPerView={1}
        containerClass={`${s.swiper_container} ${s.swiper_container_popular}`}
      >
        <div className={s.top_categ_slide_mob}>{firstSlide}</div>
        <div className={s.top_categ_slide_mob}>{secondSlide}</div>
      </Swiper>
    </div>
  )
}

export default TopCategories

это работает, но категорий может быть намного больше
подскажите, пожалуйста, как можно это оптимизировать, ибо я в данный момент не могу найти решение получше?

Comments

[Сергей Сергей]

Для большого количества порций процедуру разбиения придётся растягивать по времени.

async while() {
await delay()
}

типа такого.

Answer 1

[Aetae]

Заюзать lodash chunk, а дальше как обычно, map в map на map.