Почему не срабатывает событие resize?

Question

[uzi_no_uzi]

import React from 'react';

    class Menu extends React.Component {
        constructor() {
            super();

            this.state = {
                height: window.innerHeight, 
                width: window.innerWidth,
            }


            this.updateDimensions = () => {
                this.setState({
                    height: window.innerHeight, 
                    width: window.innerWidth
                  });
            }

        }
        

        componentDidMount() {
            window.addEventListener("resize", this.updateDimensions);
            console.log('тут')
        }

        componentWillUnmount() {
            console.log('тут1')
            window.removeEventListener("resize", this.updateDimensions);
        }
        

        render() {
          

            return(
              <div></div>
            )
        }
    }

    export default Menu;

Пытался отловить событие изменения размеров окна. Но по какой-то причине срабатывает только первый console.log();

componentDidMount() {
          window.addEventListener("resize", this.updateDimensions);
          console.log('тут')
     }

Почему так происходит?

Comments

[Роман Александрович]

а вот так ?

import React from 'react';

    class Menu extends React.Component {
        constructor() {
            super();

            this.state = {
                height: window.innerHeight, 
                width: window.innerWidth,
            }


           

        }
        
 updateDimensions = () => {
                this.setState({
                    height: window.innerHeight, 
                    width: window.innerWidth
                  });
            }

        componentDidMount() {
            window.addEventListener("resize", this.updateDimensions);
            console.log('тут')
        }

        componentWillUnmount() {
            console.log('тут1')
            window.removeEventListener("resize", this.updateDimensions);
        }
        

        render() {
          

            return(
              <div></div>
            )
        }
    }

    export default Menu;

[uzi_no_uzi]

Роман Александрович,

Вот так получается

Когда сюда поставил, как вы показали

[Петр Мухуров]

Первый console.log сработает в любом случае, потому что компонент монтируется в dom. Перенесите console.log в updateDimensions

[Роман Александрович]

uzi_no_uzi, у вас все модули установлены ?
пропишите npm install

[Роман Александрович]

uzi_no_uzi, и по хорошему

updateDimensions = (event ) => {
                return this.setState({
                    height: event.target.innerHeight, 
                    width: event.target.innerWidth
                  });
            }

        componentDidMount() {
            window.addEventListener("resize", this.updateDimensions);
            console.log('тут')
        }

        componentWillUnmount() {
            console.log('тут1')
            window.removeEventListener("resize", this.updateDimensions);
        }

[Петр Мухуров]

Роман Александрович,

updateDimensions = (event ) => {
                return this.setState({
                    height: event.target.innerHeight, 
                    width: event.target.innerWidth
                  });
            }

стесняюсь спросить, для чего писать return?)

Answer 1

[0xD34F]

События не срабатывают. Никакие и никогда. Срабатывают обработчики событий.

по какой-то причине срабатывает только первый console.log()

Так, первый, отлично. А второй какой? Это который в componentWillUnmount? Ну так правильно не срабатывает. Когда компонент будет удаляться из DOM - тогда и сработает. Или вы ждёте, что повторно сработает первый? - если так, то это абсурд.

Всё работает так, как и должно. Вы сделайте вывод свойств width и height в render - увидите, что они изменяются при изменении размеров окна (или перенесите console.log в updateDimensions).

Answer 2

[AntonGre4ka]

Можно кастомный хук написать

import React, {useEffect, useState} from 'react';

export const useWindowSize = () => {
	const [size, setSize] = useState([window.innerWidth, window.innerHeight])

	const handleResize = () => {
		setSize([window.innerWidth, window.innerHeight])
	}

	useEffect(() => {
		window.addEventListener('resize', handleResize)

		return () => window.removeEventListener('resize', handleResize)
	}, [size])

	return size
}

И в компоненте заюзать
const [width, height] = useWindowSize()