Tengo un detector de eventos onClick en un elemento de menú en la interfaz de usuario de material, MUI.
Cuando cargo la página, el onclick se llama automáticamente. ¿Cómo puedo arreglar esto?
const [anchorEl, setAnchorEl] = useState(null) const open = Boolean(anchorEl) const handleClick = (event) => { setAnchorEl(event.currentTarget) } const handleClose = () => { setAnchorEl(null) } const handleDelete = async (postId, token) => { setLoading(true) const deleted = await deletePost(postId, token) if (deleted) { setLoading(false) toast.success(`Post deleted successfully`) history.push('/feed') handleClose() } else { toast.error('Something went wrong') setLoading(false) handleClose() } } <IconButton id='demo-positioned-button' aria-controls={open ? 'demo-positioned-menu' : undefined} aria-haspopup='true' aria-expanded={open ? 'true' : undefined} onClick={handleClick} > <MoreVertIcon sx={{ color: '#E4E4E4' }} /> </IconButton> <Menu id='demo-positioned-menu' aria-labelledby='demo-positioned-button' anchorEl={anchorEl} open={open} onClose={handleClose} anchorOrigin={{ vertical: 'top', horizontal: 'left', }} transformOrigin={{ vertical: 'top', horizontal: 'left', }} > <MenuItem onClick={handleDelete(post._id, auth.token)}> <ListItemIcon> <DeleteIcon fontSize='small' /> </ListItemIcon> <ListItemText>Delete</ListItemText> </MenuItem> </Menu>Cuando cargo la página, la eliminación se llama automáticamente y se repite continuamente (bucle infinito) Tengo que volver a cargar la página.
Probé con simple window.alert('Hello')
También alerta infinitamente hasta que recargo la página.
Está sucediendo porque está llamando directamente a handleDelete.
<MenuItem onClick={() => handleDelete(post._id, auth.token)}> <ListItemIcon> <DeleteIcon fontSize='small' /> </ListItemIcon> <ListItemText>Delete</ListItemText> </MenuItem>Reemplace handleDelete(post._id, auth.token) con () => handleDelete(post._id, auth.token)
Tienes que llamar a handleDelete en una función de flecha:
onClick={() => handleDelete(id)}