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

Question

我有一个特殊的问题。我目前正在学习反应并从我自己的演示 API（一个 Java Spring 项目）中获取数据。

但是，我在 React 中正确接收了数据。现在我正在用它创建组件（音乐曲目元数据）。 API returns 对象数组和对象中的一个项目的响应是嵌套对象。现在我不知道如何将这些信息提取到我的 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”值...

非常感谢！

编辑：删除评论。

Answer 1

因此，您的 response.data 是 'tracks' 的数组。每个 'track' 都是一个对象。你目前正在解构你的 'track' 像这样，在你的 .map() 方法中：

{isrc, duration, explicit, fullTitle, geniusUrl}

但是.... fullTitle 和 geniusUrl 不是 'track' 对象的直接键，而是 songInfo 键，所以你必须调整你的解构：

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

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

How to extract data from nested objects array in React?

javascript

arrays

reactjs

json

nested-object