Hola, actualmente estoy haciendo un proyecto paralelo para mi cartera y me preguntaba cómo sucedió este error. Es un componente de la barra de navegación en reaccionar, con un enlace a otras páginas y un botón para establecer un tema activo. ¿Alguna idea de qué está causando la repetición infinita? Gracias.
import React, {useEffect} from 'react' import AppBar from '@mui/material/AppBar'; import Box from '@mui/material/Box' import { Button } from '@mui/material'; import { Link } from 'react-router-dom'; const MenuBar = () => { const [activeItem, setActiveItem] = React.useState('') const handleItemClick = (e, {name}) => { setActiveItem(name) } useEffect(() => { const pathname = window.location.pathname const path = pathname === '/' ? 'home' : pathname.substring(1) setActiveItem(path) }, []) return ( <div> <AppBar color='primary' position={'static'}> <Box className='flex items-center justify-between'> <Link to={'/'} onClick={setActiveItem('home')}> <Button variant='text' sx={{ bgcolor: activeItem === 'home' ? '#FDFFA9' : '#FFD365'}}>Home</Button> </Link> <Box> <Link to={'/login'} onClick={setActiveItem('login')}> <Button variant='text'>Login</Button> </Link> <Link to={'/register'} onClick={setActiveItem('login')}> <Button variant='text'>Register</Button> </Link> </Box> </Box> </AppBar> </div> ) } export default MenuBarCreo que el problema está en la forma en que asigna los controladores onClick
onClick={setActiveItem('home')}durante el renderizado, en realidad invocas la acción, no asignas la devolución de llamada, por lo que
render -> setActiveItem -> render -> ..intente asignar como valor fn en su lugar:
onClick={() => setActiveItem('home')}