React.js钩子从事件侦听器设置状态函数
请解释为什么以下结果会导致无限循环中出现以下错误：
秘密不变的违反:太多的重新渲染。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来解决问题，但我不明白在概念上问题是什么.因为状态是在循环中设置的，所以呈现被多次调用。但是，考虑到update函数，updateWindowDimensions被绑定到一个事件侦听器，而事件侦听器不是无限地运行，我不理解它。
注意:出现错误时是否需要调整窗口的大小。
回答 2
Stack Overflow用户
发布于 2019-09-17 00:31:30
目前，您没有正确处理调整大小的事件处理程序。调整大小事件处理程序的第一个参数是一个调整大小事件。另外，您将把一个函数传递给一个处理程序，而不是作为一个处理程序执行一个函数。相反，请尝试以下几点：
window.addEventListener('resize', () => updateWindowDimensions(window.innerWidth))希望这能帮上忙！
Stack Overflow用户
发布于 2019-09-17 00:40:26
@Alexander答案将解决您的确切问题，但是每次呈现时都会调用window.addEventListener，并将新的事件处理程序分配给“调整大小”事件。因此，您将很快得到数百个相同的事件侦听器调用updateWindowDimensions(window.innerWidth) (您可以通过将console.log(window.innerWidth)添加到回调中来看到它)。
我建议在空依赖项列表中使用useEffect。因此，它将被精确地调用一次，并将一个事件侦听器绑定到resize事件。
useEffect(() => {
window.addEventListener('resize', () => {
updateWindowDimensions(window.innerWidth)
})}, []);https://stackoverflow.com/questions/57965683
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号