Ререндер при изменении стейта

Question

Есть список карточек. При нажатии кнопки происходит фильтрация и кол-во элементов изменяется. Сделаны пустые элементы, чтобы верстка оставалось нормальной(flex, наверное так не делается, но увы))). Так же при определенной ширине экрана количество столбуов уменьшается.

Вопрос: почему количество пустых элементов при изменении размера numenclature остается прежним?

const [numenclature, setNumemclature] = React.useState([]);

<div>
  {numenclature.length > 0 ? (
    numenclature.map(item => (
      <NumenclatureItem
        pltk={style_pltk}
        cur={props.cur}
        key={item.ps}
        link={item.url}
        item={item}
      />
    ))
  ) : (
    <div className="goods-none">Товаров не найдено</div>
  )}
  {console.log(numenclature.length % 4 == 2)} // вот этот лог выдает нормальное (измененное) значение
  {window.innerWidth >= '1690px' ? (
    (isTablet || isBrowser) && numenclature.length % 4 == 1 ? (
      <>
        <div className="numGroup_empty"></div>
        <div className="numGroup_empty"></div>
        <div className="numGroup_empty"></div>
      </>
    ) : (isTablet || isBrowser) && numenclature.length % 4 == 2 ? (
      <>
        <div className="numGroup_empty"></div>
        <div className="numGroup_empty"></div>
      </>
    ) : (isTablet || isBrowser) && numenclature.length % 4 == 3 ? (
      <>
        <div className="numGroup_empty"></div>
      </>
    ) : (
      <></>
    )
  ) : (isTablet || isBrowser) && numenclature.length % 3 == 1 ? (
    <>
      <div className="numGroup_empty"></div>
      <div className="numGroup_empty"></div>
    </>
  ) : (isTablet || isBrowser) && numenclature.length % 3 == 2 ? (
    <>
      <div className="numGroup_empty"></div>
    </>
  ) : (
    <></>
  )}
</div>

Answer 1

Это очень глупо, но вся ошибка была в том, что window.innerWidth возвращает не "1690px", a "1690"

БЛОГ НА HUSL

Ререндер при изменении стейта

Ответы (1 шт):