В основном я пытаюсь добавить EventListener для изменения размера и

Question

Итак, вот код ...

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

 let minNumberOfCards = Math.round(window.innerWidth / 120);
 const [windowDimensions, setWindowDimensions] = React.useState(getWindowDimensions());

    React.useEffect(() => {
      function handleResize() {
        setWindowDimensions(getWindowDimensions());
      }

      window.addEventListener('resize', handleResize);
      return () => window.removeEventListener('resize', handleResize);
    }, [windowDimensions,]);

Проблема, с которой я сталкиваюсь, заключается в том, что мне нужно вычислить количество отображаемых карт, и я получаю действительно грязный результат: |. Поскольку addEventListener является асинхронной штукой. Я попробовал еще раз: minNumberOfCards = Math.round(windowDimensions.width/ 120); buuuut, поскольку он асинхронный, через некоторое время я получаю правильное число, когда мои начальные числа меняются. В основном я установил переменную minNumberOfCards по умолчанию 9 (например).

Ожидаемый результат будет иметь minNumberOfCards в зависимости от ширины экрана. Это оно !!!!! Любые идеи / решения о том, как я могу добиться этого, не вызывая много повторных рендеринга?

Answer 1

Это идеальный вариант использования для debounce или throttle:

<code>import debounce from 'lodash.debounce';

const App = () => {
  const [windowDimensions, setWindowDimensions] = useState('Change Window Size');

  const [minNumberOfCards, setMinNumberOfCards] = useState(
    Math.round(window.innerWidth / 120)
  );

  useEffect(() => {
    // Better add a listener and only change the minNumberOfCards
  },[...]);

  useEffect(() => {
    const handleResize = () => setWindowDimensions(getWindowDimensions());
    const debouncedHandleResize = debounce(handleResize, 500);

    window.addEventListener('resize', debouncedHandleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, [windowDimensions]);
  return (
    <FlexBox>
      <pre>{JSON.stringify(windowDimensions, null, 2)}

);};

Попробуйте изменить размер окна в следующей песочнице:

Пожалуйста, обратитесь к Объяснение процедуры деблокирования и регулированияЧерез примеры