Poco a poco estoy entendiendo los servicios y busco con React, pero cuando trato de mostrar algo, no me muestra absolutamente nada. Dejo el código por si alguien me puede ayudar. Tal vez tenga que mirar cómo trabajar con JSON, no lo sé.
let datosApi = []; const recogerDatos = () => { let json = "https://jsonplaceholder.typicode.com/albums"; let miApi = "http://localhost/dsw/api/"; fetch(json) .then(data => data.json()) .then(info => { console.log(info); this.datosApi = info; }) } function Services() { return ( <> {datosApi.map(datos => ( <p>{datos.title}</p> ))} </> ); } export default Services;Los datos JSON aparecen en https://jsonplaceholder.typicode.com/albums
Estás mostrando datos de tu lista
let datosApi = [];Sin embargo, no parece que esté completando su lista con datos de la API, ya que nunca se llama al método recogerDatos().
Creo que a tu ejemplo le falta algo o no lo has hecho.
Básicamente hay algunas cosas mal:
He creado un entorno limitado de trabajo aquí que muestra que funciona, y el código está a continuación:
const [result, setResult] = useState([]); const recogerDatos = () => { let json = "https://jsonplaceholder.typicode.com/albums"; fetch(json) .then((data) => data.json()) .then((info) => { console.log(info); setResult(info); }); }; useEffect(() => { recogerDatos(); }, []); return ( <div className="App"> {result.length > 0 && result.map((datos) => <p>{datos.title}</p>)} </div> );La función recogerDatos se llama al cargar la página (ver useEffect), y el resultado se actualiza cuando la recuperación es exitosa. Esto provoca una nueva representación y se muestran los elementos.
Según su código, parece que le faltan algunos patrones básicos de React, como la gestión del estado y el ciclo de vida de los componentes. Dado que React vuelve a renderizar muchos componentes, desea almacenar cosas como los datos obtenidos en el estado para evitar que se restablezcan constantemente a su valor inicial. Y cuando desea recuperar los datos, generalmente no desea hacerlo en cada renderizado (eso causaría MUCHA recuperación), sino que generalmente desea activarlos en función de diferentes eventos, por ejemplo, cuando el componente (que se utilizará para mostrar estos datos) está montado. Tales cosas generalmente usan los métodos del ciclo de vida de los componentes / useEffect hooks para garantizar que sucedan en el momento correcto. Te recomiendo que vayas a la documentación de React y estudies un poco más los conceptos básicos para que puedas comprender los conceptos principales cuando estés codificando, pero aquí hay un sandbox rápido con un ejemplo de cómo puedes obtener el efecto deseado en React: https:/ /codesandbox.io/s/beautiful-frost-on9wmn?file=/src/App.js