Блог

У меня возникли проблемы с пониманием проблемы в этом коде:

     export default function CustomPopup({wi,he,children}) {

        //some code

        const [popupSize,setPopupSize] = useState([`${wi}px`,`${he}px`])
        
        const handlePopupSize = () =>{
            let c = [];
            (window.innerWidth < (wi/0.9)) ? c[0] = `90%` : c[0] = `${wi}px`;
            (window.innerHeight < (he/0.8)) ? c[1] = `80%` : c[1] = `${he}px`;
            if (c != popupSize) { setPopupSize(c) };
        }

        window.addEventListener("resize", handlePopupSize)

        return (
            
                <div className="popup--page--wrapper">
                    <div className="popup--box" style={{width: popupSize[0], height: popupSize[1]}}>  
                        { children }
                    </div>
                </div>
        )
    }

 

Когда я изменяю размер страницы, страница сильно отстает и даже вызывает ошибку в браузере.
Кажется, что-то не так с кодом, но я не могу выяснить.
Заранее спасибо!

Вам нужно добавить прослушиватель событий в useEffect хук.

 import React, { useState, useEffect } from 'react'
.....
.....
useEffect(() => {

    window.addEventListener("resize", handlePopupSize)
    return () => window.removeEventListener("resize", handlePopupSize)
},[])
 

Ваш текущий код создает цикл addEventListeners , потому что слушатель создается при каждом отдельном рендеринге, а настройка состояния вызывает новый рендеринг при каждом изменении размера.