javascript - React.js Hooks 从事件监听器设置状态函数

Question

您能否解释一下为什么以下会导致无限循环并出现以下错误:

Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop.

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 绑定(bind)到一个不会无限运行的事件监听器，我不明白。

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

Answer 1

目前您没有正确处理调整大小事件处理程序。调整大小事件处理程序的第一个参数是 resize event。 .此外，您会将函数传递给处理程序，而不是将函数作为处理程序执行。请尝试以下操作:

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

希望对您有所帮助!