Solo estoy tratando de experimentar con una aplicación, y en mi html estoy tratando de devolver los accesorios de userData que en mi consola registran cosas como lineStatus, etc. Sin embargo, parece que no devuelvo nada.
mi código es el siguiente:
import React, { useState, useEffect } from 'react' import axios from "axios"; const tflData = "https://api.tfl.gov.uk/line/mode/tube/status"; axios.request(tflData).then(function (response) { console.log(response.data); }).catch(function (error) { console.error(error); }); function Lines() { const [userData, setUserData] = useState({}); const tflUserWithFetch = async () => { const response = await fetch(tflData); const jsonData = await response.json(); setUserData(jsonData); }; useEffect(() => { tflUserWithFetch(); }, []); return ( <div className="App"> <header className="App-header"> <h2>Line Data</h2> </header> <div className="user-container"> <h5 className="info-item">Tube station: {userData.name}</h5> <h5 className="info-item">Status: {userData.lineStatuses}</h5> </div> </div> ); } export default LinesBásicamente, estoy tratando de devolver los valores o los valores de contenido, pero me falta algo.
En primer lugar, elija axios o fetch . Hay muchos artículos que explican las diferencias.
En segundo lugar, al ver el punto final que proporcionó, puedo ver que los resultados están en una lista JSON. Por lo tanto, acceder al nombre y los estados de línea no funcionará directamente. Sin embargo, puede envolverlo mapeando cada valor en la lista:
<div className="App"> <header className="App-header"> <h2>Line Data</h2> </header> {userData.map((user) => ( <div className="user-container" key={user.id}> <h5 className="info-item">Tube station: {user.name}</h5> <h5 className="info-item">Status: {user.lineStatuses}</h5> </div>)) } </div>Traté de realizar la solicitud desde la URL que proporcionó en el código, parece que devuelve una matriz JSON, por lo que cuando intenta llegar a userData.name no existe en userData, userData contiene una lista