我有一个特殊的问题。我目前正在学习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是嵌套对象。我的react组件是:
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>
)
}
}
"state"我的组件保存API请求的结果。这是如何工作的呢?我读过一些关于嵌套对象的帖子，但我的方法是渲染一个" " Track…/比;项目为每个轨道，所以建议的方法的帖子不适合我....我需要"天才"和fullTitle">
多谢!
编辑:删除注释
所以，你的response.data是一个'tracks'数组。每个"轨道"都是一个对象。在.map()方法中，您当前正在像这样解构您的"track":
{isrc, duration, explicit, fullTitle, geniusUrl}
但是…fullTitle和geniusUrl不是你的"轨道"对象的直接键，而是songInfo键，所以你必须调整你的解构:
{isrc, duration, explicit, songInfo: {fullTitle, geniusUrl}}