0
86
VistasReact.js disparando solicitudes ilimitadas
¿Qué estoy tratando de hacer?
Estoy tratando de llamar a una API que envía información y quiero enviar la información a la aplicación de reacción. He logrado lo que quería, sin embargo, hay un problema.
EL PROBLEMA
React está disparando solicitudes ilimitadas a la API como se muestra en la imagen a continuación.
aplicación.js
import React, { useState } from 'react';
import './css/main.css'
const App = () => {
const [data, setData] = useState([]);
fetch(`http://localhost/api/index.php`).then((res)=>{return res.json()}).then(
(data)=>{
setData(data)
}
)
return (
<div>
{data.length > 0 && (
<ul>
{data.map(ad => (
<li key={info.id}>
<h3>{info.name}</h3>
<p>{info.details}</p>
</li>
))}
</ul>
)}
</div>
);
}
export default App;
índice.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
3 Respuestas
Responde la pregunta0
¿Por qué no funciona?
La razón por la que esto sucede es que está obteniendo datos y actualizando el estado sobre la marcha, lo que hace que el componente se vuelva a procesar, luego vuelva a obtener datos, establezca el estado, vuelva a procesar (quedarse atascado en un bucle).
¿Cómo resolver?
Debe usar useEffect hook (lea más aquí ). Además, puede leer más sobre la obtención de datos en el sitio web de documentación oficial aquí .
¿Qué cambiará en tu código?
Todo el fetch se envolverá en un gancho useEffect .
useEffect(() => {
fetch(`http://localhost/api/index.php`).then((res)=>{return res.json()}).then(
(data)=>{
setData(data)
}
)
}, []);
0
necesitas usar useEffect(). El problema es cuando configura los datos que su componente representa desde cero y nuevamente obtiene datos y nuevamente configura y nuevamente otra vez ...
useEffect(() => {
fetch(`http://localhost/api/index.php`)
.then(res=>res.json())
.then(data=>setData(data))
}, []);
0
Esto se debe a que está configurando el estado en la respuesta de la API en sí y el cambio de estado activa la nueva representación.
Esto sucede de la siguiente manera: obtener la llamada a la API -> Respuesta de datos -> establecer el estado -> desencadenar una nueva representación -> obtener la llamada a la API y el ciclo es continuo y da como resultado una llamada a la API infinita.
Solución: llame a la API dentro de useEffect, useEffect es un enlace que se activa una vez cuando la página se muestra o cuando cambia su dependencia.
Actualice su app.js de la siguiente manera:
import React, { useState } from 'react';
import './css/main.css'
const App = () => {
const [data, setData] = useState([]);
useEffect(()=> {
fetch(`http://localhost/api/index.php`).then((res)=>{return res.json()}).then(
(data)=>{
setData(data)
}
),[]
}
return (
<div>
{data.length > 0 && (
<ul>
{data.map(ad => (
<li key={info.id}>
<h3>{info.name}</h3>
<p>{info.details}</p>
</li>
))}
</ul>
)}
</div>
);
}
export default App;