Soy relativamente nuevo en React y lo estoy aprendiendo. Estoy tratando de obtener una nueva publicación usando axios . Pero cuando presiono la URL '/getPost' , el componente GetPost está llamando continuamente al backend. ¿Es este el comportamiento esperado?
A continuación se muestran los fragmentos de código:
// important imports import React from 'react' import { BrowserRouter as Router,Route, Routes } from 'react-router-dom'; import './App.css'; import Create from './component/Create'; import Edit from './component/Edit'; import GetPost from './component/GetPost'; import Home from './component/Home'; function App () { return ( <div className='App'> <Router> <Routes> <Route path ='' element= {<Home></Home>}> </Route> <Route path ='/edit' aelement= {<Edit/>}> </Route> <Route path='/create' element= {<Create/>}></Route> <Route path='/getPost' element= {<GetPost/>}></Route> </Routes> </Router> </div> ) } export default App; import React, { useState } from 'react'; import axios from 'axios'; const GetPost = () => { const [person, setPerson] = useState([]); axios.get(`https://jsonplaceholder.typicode.com/users`) .then(res => { console.log(res.data); setPerson(res.data); }) return ( person.map(p => <div> {p.id} </div> ) ) } export default GetPost;Eso se debe a esa llamada de axios dentro de GetPost . Se ejecuta cuando se montan los componentes, establece el estado llamando a setPerson(res.data) , desencadenará una nueva representación, luego la parte axios se volverá a ejecutar, y eso será para siempre. Para evitar esto, querrías usar el gancho useEffect de React.
import React, { useState, useEffect } from 'react'; import axios from 'axios'; const GetPost = () => { const [person, setPerson] = useState([]); useEffect(()=>{ axios.get(`https://jsonplaceholder.typicode.com/users`) .then(res => { console.log(res.data); setPerson(res.data); }) },[]) return ( person.map(p => <div> {p.id} </div> ) ) } export default GetPost;¿Qué hay de obtener datos en useEffect como a continuación?
useEffect(() => { const load = async () => { const res = await axios.get(`https://jsonplaceholder.typicode.com/users`) console.log(res.data); setPerson(res.data); } load(); }, []);Supongo que la razón por la que se sigue llamando al componente GetPost es que actualiza el estado en el componente, lo que hace que se vuelva a procesar como se explica aquí .
Haga su llamada API en UseEffect para resolver esto-
useEffect(()=>{ axios.get(`https://jsonplaceholder.typicode.com/users`) .then(res => { console.log(res.data); setPerson(res.data); }) },[])Además, realiza los siguientes cambios en su App.js-
<div className='App'> <Router> <Routes> <Route exact path ='/' element= {<Home/>}> </Route> <Route exact path ='/edit' element= {<Edit/>}> </Route> <Route exact path='/create' element= {<Create/>}></Route> <Route exact path='/getPost' element= {<GetPost/>}></Route> </Routes> </Router>