OnClick事件后更新状态时的无限循环

Question

所以我试图在单击图标按钮后触发菜单弹出。

我正在使用MUI、

所以我复制了演示代码来测试它，

<div>
<IconButton onClick={handleOpenMenu} 
aria-controls={open ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
>
<MoreVertIcon />
</IconButton>
<Menu
id="demo-positioned-menu"
aria-labelledby="demo-positioned-button"
anchorEl={anchorEl}
open={open}
onClose={handleMenuClose}
anchorOrigin={{
vertical: 'top',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
>
<MenuItem onClick={handleMenuClose}>Profile</MenuItem>
<MenuItem onClick={handleMenuClose}>My account</MenuItem>
<MenuItem onClick={handleMenuClose}>Logout</MenuItem>
</Menu>
</div>

下面是事件处理程序

const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const handleOpenMenu = (event) => {
setAnchorEl(event.currentTarget);
};
const handleMenuClose = () => {
setAnchorEl(null);
};

但是，每当我按下IconButton时，它就会冻结整个UI，并出于某些原因以无限循环打印我的Firebase OnAuthStateChanges函数。

var unsubscribe = onAuthStateChanged(auth, (user) => {
if (user) {
const uid = user.uid;
console.log(uid)
setAuthenticated(true)
} else {

setAuthenticated(false)
}
});

关于我做错了什么，有什么建议吗？

Answer 1

无限循环是由onAuthStateChanged观测器引起的。该函数设置一个侦听器，该侦听器将触发并导致组件重新应答。新的呈现设置了另一个激发的侦听器，依此类推。在这种情况下，即使取消订阅也无济于事。

一个可能的修复方法是将它封装在一个useEffect钩子中，并使用一个空的依赖数组。

useEffect(() => {
onAuthStateChanged(auth, (user) => {
//your user logic...
if (user) {
setAuthenticated(true);
} else {
setAuthenticated(false);
}
});
}, []);