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

【问题标题】：Iterating over an array of objects and mapping them with custom key names in react迭代对象数组并在反应中使用自定义键名映射它们
【发布时间】：2022-01-12 19:34:31
【问题描述】：

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

    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 响应的键值并将它们分配给自定义键。

【问题讨论】：

标签： javascript reactjs plyr.js

【解决方案1】：

你想这样做吗？

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

console.log(a)

【讨论】：

【解决方案2】：

你的意思是。映射源数组？

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

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

【讨论】：