迭代对象数组并在反应中使用自定义键名映射它们

Question

我正在尝试遍历对象数组并将它们作为道具分配给 React Plyr 组件，这就是我目前正在做的事情，我只是将第一个对象值作为道具传递给组件，就像这样。

    if (movie) {
        console.log(movie.video_info[0].src)
        videoSrc = {
            type: 'video',
            title: 'Example title',
            sources: [
                {
                    size: movie.video_info[0].quality,
                    src: movie.video_info[0].source
                }
            ]
        }
    };

这是我的 api 回复

"video_info": [
    {
        "quality": "1080",
        "video_url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
        "id": "1111"
    },
    {
        "quality": "720",
        "video_url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
        "id": "1112"
    }
]

这里是 plyr 对象的结构 link to plyr io。

我还是 React 的新手，我确实尝试过使用 for each 和 map 但我无法更改键名，基本上我想存储 api 响应中的键值并将它们分配给自定义键。

Answer 1

你是说。映射到一组来源？

let sources = movie.video_info
                   .map((vidInfo)=>({
                       size: vidInfo.quality,
                       src: vidInfo.source
                     }))

let videoSrc = {
            type: 'video',
            title: 'Example title',
            sources
        }

Answer 2

您要这样做吗？

let a = movie.video_info.map( v => {
    return {
        type:'video',
        title: 'Example title',
        sources: [{
            size: v.quality,
            src: v.video_url
        }]
    }
})

console.log(a)

迭代对象数组并在反应中使用自定义键名映射它们

Iterating over an array of objects and mapping them with custom key names in react

javascript

reactjs

plyr.js