0
189
ViewsuseEffect no se activa después del enrutamiento
Soy muy nuevo cuando se trata de usar ganchos de reacción, renderizado y enrutamiento.
Aplicación.js
function App() { return ( <div className="App"> <Navbar /> </div> ); }Navbar.js
export default function Navbar() { return( <BrowserRouter> <Routes> <Route path = '/:page' element = {<Header/>} /> <Route path='/' element={<Header/>} /> <Route exact path='' element = {<Home/>}/> <Route exact path='home' element = {<Home/>}/> <Route exact path='players' element = {<BasicTable/>}/> <Route exact path='about' element = {<About/>}/> <Route path="*" element={<Home />} /> </Routes> </BrowserRouter> ) }BasicTable.js
const getObj = async () => { const value = await axios.get(...); return value; } export function BasicTable(){ const [obj, setObj] = useState(); console.log("getting object"); useEffect (()=> { console.log("using Effect"); setObj(getObj()); }, []); //Rest of the code below this... }Estoy tratando de hacer que axios get call se active cada vez que alguien navega a la página de la tabla básica (/página de jugadores). Si solo inserto la llamada axios.get desnuda en la función de tabla básica, esto provoca un bucle infinito de llamadas de obtención de API. Ahora estoy usando el gancho useEffect, pero nunca se activa cuando navego a "/jugadores". De hecho, nunca se dispara. Lo único que veo es el registro de la consola "obteniendo objetos", pero nunca "usando Effect". ¿Me estoy perdiendo una parte importante de useEffect?
1 answers
Answer question0
El gancho useEffect está actualizando el estado obj al objeto Promise devuelto implícitamente con setObj(getObj()); . Como mínimo, el useEffect debe esperar a que se resuelva la función getObj . Esto se puede hacer de un par de maneras:
const getObj = async () => { const value = await axios.get(...); return value; } Usando async/await :
export function BasicTable(){ const [obj, setObj] = useState(); console.log("getting object"); useEffect (()=> { console.log("using Effect"); const getObject = async () => { const obj = await getObj(); setObj(obj); } getObject(); }, []); // Rest of the code below this... } 
Usando la cadena Promise:
export function BasicTable(){ const [obj, setObj] = useState(); console.log("getting object"); useEffect (()=> { console.log("using Effect"); getObj().then(obj => setObj(obj)); }, []); // Rest of the code below this... } De hecho, debido a que getObj implícitamente devuelve un objeto Promise, simplemente puede devolver la Promise desde axios .
const getObj = () => { return axios.get(...); }