Tengo una especie de problema especial. Actualmente estoy aprendiendo a reaccionar y he obtenido datos de mi propia API de demostración (un proyecto de Java Spring).
Sin embargo, recibo los datos correctamente en React. Ahora estoy creando componentes con él (metadatos de pista de música). La respuesta de la API devuelve una matriz de objetos y un elemento dentro del objeto es un objeto anidado. Ahora no sé cómo puedo extraer esta información a mi componente React.
Aquí hay un ejemplo JSON de mi respuesta:
Object { duration: 200015 explicit: false id: 8 isrc: "AUDCB1701705" name: "Fireworks (feat. Moss Kena & The Knocks)" songInfo: Object { id: 7, fullTitle: "Fireworks by Purple Disco Machine (Ft. The Knocks & Moss Kena)", geniusUrl: "https://genius.com/Purple-disco-machine-fireworks-lyrics", … } fullTitle: "Fireworks by Purple Disco Machine (Ft. The Knocks & Moss Kena)" geniusUrl: "https://genius.com/Purple-disco-machine-fireworks-lyrics" id: 7 trackMetadata: nullComo puede ver, songInfo es el objeto anidado. Mi componente de reacción es como:
class ResultArea extends Component { constructor(props) { super(props); this.state = { tracks: [] } } componentDidMount() { axios.get("http://localhost:8080/all") .then(response => { this.setState({ tracks: response.data }) }) } componentDidUpdate(prevProps, prevState, snapshot) { console.log("Component updated! State is now:"); console.log(this.state.tracks); } render() { const tracklist = this.state.tracks; const tracks = tracklist.map( ({isrc, duration, explicit, fullTitle, geniusUrl}) => <Track key={isrc} fullTitle={fullTitle} isrc={isrc} duration={duration} explicit={explicit} geniusUrl={geniusUrl} /> ); return ( <React.Fragment> <div className="border"> <ul> {tracks} </ul> </div> </React.Fragment> ) } }El "estado" de mi componente contiene el resultado de la solicitud de la API. ¿Como funciona esto? He leído algunas publicaciones sobre objetos anidados, pero mi enfoque es representar un elemento "<Pista ... /> para cada pista, por lo que los métodos sugeridos de las publicaciones no funcionan para mí... Necesito el " geniusUrl" y el valor "fullTitle" del songInfo-Object anidado...
¡Muchas gracias!
EDITAR: Se eliminó un comentario.
Entonces, su response.data es una matriz de 'pistas'. Cada 'pista' es un Objeto. Actualmente está desestructurando su 'pista' así, en su método .map() :
{isrc, duration, explicit, fullTitle, geniusUrl} Pero... fullTitle y geniusUrl no son claves directas de su objeto 'pista', sino que es la clave de información de la songInfo , por lo que tendría que ajustar su desestructuración:
{isrc, duration, explicit, songInfo: {fullTitle, geniusUrl}}