![](/img/trans.png)
[英]how to extract all objects from nested arrays into one array in React
[英]How to extract data from nested objects array in React?
我有一个特殊的问题。 我目前正在学习 react 并从我自己的演示 API(一个 Java Spring 项目)中获取数据。
但是,我在 React 中正确接收了数据。 现在我正在用它创建组件(音乐曲目元数据)。 API 的响应返回一个对象数组,对象中的一项是嵌套对象。 现在我不知道如何将这些信息提取到我的 React 组件中。
这是我的响应的示例 JSON:
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: null
如您所见,songInfo 是嵌套对象。 我的反应组件是这样的:
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>
)
}
}
我的组件的“状态”保存了 API 请求的结果。 这是如何运作的? 我已经阅读了一些关于嵌套对象的帖子,但我的方法是为每个轨道渲染一个“<Track ... /> 项目,因此帖子的建议方法对我不起作用......我需要“ GeniusUrl" 和嵌套的 songInfo-Object 中的 "fullTitle" 值...
非常感谢!
编辑:删除了评论。
因此,您的response.data
是一个“轨道”数组。 每个“轨道”都是一个对象。 您目前正在像这样在您的.map()
方法中解构您的“轨道”:
{isrc, duration, explicit, fullTitle, geniusUrl}
但是.... fullTitle
和geniusUrl
不是“轨道”对象的直接键,而是songInfo
键,因此您必须调整解构:
{isrc, duration, explicit, songInfo: {fullTitle, geniusUrl}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.