Блог

У меня своего рода особая проблема. В настоящее время я изучаю react и извлек данные из своего собственного демонстрационного API (проект Java Spring).

Однако я правильно получаю данные в React. Теперь я создаю с его помощью компоненты (Метаданные музыкальной дорожки). Ответ API возвращает массив объектов, и один элемент внутри объекта является вложенным объектом. Теперь я не знаю, как я могу извлечь эту информацию в свой компонент React.

Вот пример JSON моего ответа:

 Object { ​​ duration: 200015 ​​ explicit: false ​​ id: 8 ​​ isrc: "AUDCB1701705" ​​ name: "Fireworks (feat. Moss Kena amp; The Knocks)" ​​ songInfo: Object { id: 7, fullTitle: "Fireworks by Purple Disco Machine (Ft. The Knocks amp; Moss Kena)", geniusUrl: "https://genius.com/Purple-disco-machine-fireworks-lyrics", … } ​​​ fullTitle: "Fireworks by Purple Disco Machine (Ft. The Knocks amp; Moss Kena)" ​​​ geniusUrl: "https://genius.com/Purple-disco-machine-fireworks-lyrics" ​​​ id: 7 ​​​ trackMetadata: null  

Как вы можете видеть, songInfo-это вложенный объект. Мой компонент реакции похож на:

 class ResultArea extends Component {   constructor(props) {  super(props);  this.state = {  tracks: []  }  }   componentDidMount() {  axios.get("http://localhost:8080/all")  .then(response =gt; {  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}) =gt;  lt;Track key={isrc} fullTitle={fullTitle} isrc={isrc} duration={duration} explicit={explicit} geniusUrl={geniusUrl} /gt;  );  return (  lt;React.Fragmentgt;  lt;div className="border"gt;  lt;ulgt;  {tracks}  lt;/ulgt;  lt;/divgt;  lt;/React.Fragmentgt;  )  } }  

«Состояние» моего компонента содержит результат запроса API. Как это работает? Я прочитал несколько сообщений о вложенных объектах, но мой подход заключается в том, чтобы визуализировать «.. /gt; пункт для каждого трека, поэтому предлагаемые методы сообщений для меня не работают…. Мне нужно значение «geniusUrl» и «fullTitle» из вложенного объекта songInfo…

Большое спасибо!

ПРАВКА: Комментарий удален.

Итак, у вас response.data есть массив «дорожек». Каждая «дорожка» — это Объект. В настоящее время вы разрушаете свой «трек» вот так, в своем .map() методе:

 {isrc, duration, explicit, fullTitle, geniusUrl}  

Но…. fullTitle и geniusUrl не являются прямыми ключами вашего объекта «трек», а скорее songInfo являются ключом, поэтому вам придется настроить свое разрушение:

 {isrc, duration, explicit, songInfo: {fullTitle, geniusUrl}}