如何从 React 中的嵌套对象数组中提取数据？

Posted 2023-02-22

【中文标题】如何从 React 中的嵌套对象数组中提取数据？

【英文标题】：How to extract data from nested objects array in React?

【发布时间】：2021-12-12 00:21:57

【问题描述】：

我有一个特殊的问题。 我目前正在学习 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 请求的结果。 这是如何运作的？我已经阅读了一些关于嵌套对象的帖子，但我的方法是为每个轨道呈现一个“”项目，因此帖子的建议方法对我不起作用...... 我需要嵌套的 songInfo-Object 中的“geniusUrl”和“fullTitle”值...

非常感谢！

编辑：删除评论。

【参考方案1】：

所以，您的response.data 是一个“曲目”数组。每个“轨道”都是一个对象。您目前正在像这样在 .map() 方法中解构您的“轨道”：

isrc, duration, explicit, fullTitle, geniusUrl

但是.... fullTitle 和 geniusUrl 不是您的“轨道”对象的直接键，而是 songInfo 键，因此您必须调整解构：

isrc, duration, explicit, songInfo: fullTitle, geniusUrl

【讨论】：

谢谢！经过大量尝试，您向我展示了它是多么容易......再次感谢 - 解决了我的问题:-)