Hice dos componentes simples y directos: React, utilicé una API de código abierto para probar la integración de la API. React muestra este comportamiento extraño de registros de consola infinitos. No entiendo el problema. Estoy usando la función de búsqueda para hacer llamadas API y componentes funcionales.
Componente de la aplicación:
function App() { const [characters, setCharac] = useState([]) const URL = "https://swapi.dev/api/"; fetch(URL + "people").then(response => response.json().then(data => { setCharac(data.results) console.log('Test'); })) return ( <div className="App"> {characters.map(charac => { return <Character {...charac} /> })} </div> ); }Componente de carácter:
const Character = (props) => { console.log(props); return ( <div key={props.name}> <h1>{props.name}</h1> <p>{props.height}</p> </div> ); } console.log('Test'); en el componente de la aplicación y console.log(props); en el componente de carácter se ejecutan infinitamente.
Este es el método de renderizado
const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> );Intenta envolverlo en un useEffect
p.ej
useEffect(()=>{ fetch(URL + "people").then(response => response.json().then(data => { setCharac(data.results) console.log('Test'); })) },[])de lo contrario, cada vez que se establece el estado, se activa la recuperación nuevamente porque se activa una nueva representación.
Sus componentes se representan varias veces porque su estado cambia cada vez que obtiene datos (debido a setState ).
Intente crear una función fetchData() . Haga que esta función también sea async para esperar a que se recuperen los datos.
const fetchData = async () => { const result = await fetch(URL + "people").then(response => response.json().then(data => { setCharac(data.results) console.log('Test'); return data; })); return result; } y luego utilícelo dentro useEffect (Lea más sobre useEffects: React hooks: ¿Qué/Por qué `useEffect`? )
useEffect(() => { fetchData(); }, []); Tenga en cuenta el uso de [] en useEffect . Los datos se obtendrán solo una vez cuando cargue el componente.
Debido a que fetch algunos datos, actualice el estado, lo que provoca una nueva representación, que hace otra fetch , actualiza el estado, lo que provoca otra representación ... etc.
Llame a su función de fetch desde dentro de un useEffect con una matriz de dependencia vacía para que solo se llame una vez cuando el componente se represente inicialmente.
Nota 1: no puede registrar inmediatamente el estado después de configurarlo, ya que configurar el estado es un proceso asíncrono. Sin embargo, puede usar otro useEffect para observar cambios en el estado y registrar su valor actualizado.
Nota 2: he usado async/await en este ejemplo porque la sintaxis es un poco más limpia.
// Fetch the data and set the state async function getData(endpoint) { const json = await fetch(`${endpoint}/people`); const data = await response.json(); setCharac(data.results); } // Call `getData` when the component initially renders useEffect(() => { const endpoint = 'https://swapi.dev/api'; getData(endpoint); }, []); // Watch for a change in the character state, and log it useEffect(() => console.log(characters), [characters]);