Me he vuelto loco durante la última hora tratando de descubrir su error "Advertencia: no se puede actualizar un componente ( App ) mientras se representa un componente diferente (navegación). Para ubicar la llamada incorrecta a Nav Nav siga el seguimiento de la pila como se describe en https://reactjs.org/link/setstate-in-render"
import React, {useState, useEffect} from 'react' import React, {useState, useEffect} from 'react' import './App.css'; import Cart from './pages/cart' import Home from './pages/home' import Drawings from './pages/drawings' import Paintings from './pages/paintings' import Photos from './pages/photos' import Nav from './pages/components/nav' const App = ()=> { const [page, setPage] = useState('home'); if(page=='home') return( <> <Nav setPage={setPage}/> <Home/> </> ) else if(page=='drawings') return( <> <Nav setPage={setPage}/> <Drawings/> </> ) } export default App;Nav.js
import React from 'react' import 'C:/Users/Bharat/Desktop/ecommerce/vgogh/src/App.css' const Nav = ({setPage}) => { return ( <> <nav className='navBar'> <div className="home"><button onClick={setPage('home')}>Home</button></div> <ul> <li className="navItems"><button onClick={()=>setPage('paintings')}>Painting</button></li> <li className="navItems"><button onClick={()=>setPage('photos')}>Photos</button></li> <li className="navItems"><button onClick={()=>setPage('drawings')}>Drawings</button></li> <li className="navItems" id='cart'><button onClick={()=>setPage('cart')}>Cart</button></li> </ul> </nav> </> ) } export default NavEn Nav.js
En lugar de escribir esto:
<button onClick={setPage('home')}>Home</button>Puedes escribir :
<button onClick={()=>setPage('home')}>Home</button>Creo que lo conseguiste. Para saber más sobre el manejo de eventos, puede leer su documentación. https://reactjs.org/docs/handling-events.html
Después de buscar un poco, descubrí que me perdí una función de flecha en mi botón "inicio" en nav.js que, como señaló plichard, provocó un bucle infinito.
Anterior:
<div className="home"> <button onClick={setPage('home')}>Home</button> </div>`Resuelto:
<div className="home"> <button onClick={()=>setPage('home')}>Home</button> </div>`