React.js钩子从事件监听器设置状态函数

Question

您能否解释以下原因导致无限循环并出现以下错误：

未捕获的不变违规：重新渲染过多。 React限制了渲染次数以防止无限循环。

import React from "react";
import { useState } from 'react';

function MyImageComponent(props) {
  const {
    images
  } = props;

  const [windowWidth, updateWindowDimensions] = useState(window.innerWidth);

  window.addEventListener('resize', updateWindowDimensions(window.innerWidth)); //error here


  return (
    <div>
    {windowWidth}
    </div>
  );

}

export default MyImageComponent;

我相信我可以使用useEffect API来解决，但我在概念上不明白问题出在哪里……似乎多次调用渲染，因为状态是在循环中设置的……但是鉴于更新函数updateWindowDimensions为绑定到不是无限运行的事件侦听器，我不理解。

注意：无论是否调整窗口大小，都会出现该错误。

Answer 1

当前，您没有正确处理调整大小事件处理程序。 调整大小事件处理程序的第一个参数是调整大小事件 。 同样，您会将函数传递给处理程序，而不是将函数作为处理程序执行。 请尝试以下操作：

window.addEventListener('resize', () => updateWindowDimensions(window.innerWidth))

希望有帮助！

Answer 2

@Alexander Staroselsky答案将解决您的具体问题，但在每个渲染window.addEventListener将被调用，新的事件处理程序将被分配到“调整”事件。 因此，您很快就会得到数百个相同的事件侦听器，它们调用updateWindowDimensions(window.innerWidth) （您可以通过将console.log(window.innerWidth)添加到回调中来看到它）。

我建议将useEffect与空的依赖项列表一起使用。 因此它将仅被调用一次，并将一个事件侦听器绑定到resize事件resize 。

useEffect(() => {
    window.addEventListener('resize', () => {
        updateWindowDimensions(window.innerWidth)
  })}, []);