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

Question

[sergeyviktorovich]

this.state = {
            perpage: 24,
        }

мне при 768 нужно уменьшить количество карточек в perpage: 12 и это же сделать если экран 768 при рендринге

Comments

[WbICHA]

useEffect
componentDidMount

Answer 1

[0xD34F]

onResize = () => {
  this.setState(() => ({
    /* ... */
  }));
}

componentDidMount() {
  window.addEventListener('resize', this.onResize);
  this.onResize();
}

componentWillUnmount() {
  window.removeEventListener('resize', this.onResize);
}

https://jsfiddle.net/jmz39vwo/

Comments

[sergeyviktorovich]

0xD34F, а чего делайте так window.addEventListener('resize', this.onResize); а не просто this.onResize ?

[Aetae]

Такую хрень лучше делать через matchMedia.onchange, чтоб не гоняло стейт почём зря.

[0xD34F]

Aetae, как скажете.

sergeyviktorovich, а вы подумайте.

[sergeyviktorovich]

0xD34F, а как ширину экрана узнать при загрузке ? чтобы сравнить и где это сделать на 768 ?

[0xD34F]

sergeyviktorovich, кончайте тупить, в показанном коде всё есть - переходите по ссылкам, и разбираетесь, что и как.

[sergeyviktorovich]

0xD34F, не могу понять почему нельзя на componentWillmount() поменять число карточек с стейт, чтобы не было 2 перезагрузки если я первый раз загружаю приложение и экран 768 ?
не ужели на componentWillmount ширина экрана window.innerWidth не доступна ?

if (window.innerWidth <= 1365) {
            this.setState({ perpage: 18 });
        }
if (window.innerWidth <= 768) {
            this.setState({ perpage: 12 });
        }