访问对象数组中的值答案

【问题标题】：Access the value from array of objects访问对象数组中的值
【发布时间】：2018-02-07 14:21:58
【问题描述】：

代码

props.thumbnails.forEach(value=>{
        console.log(value.photo.thumbnail_url);
    })

错误

TypeError: Cannot read property 'thumbnail_url' of undefined

当我尝试时

props.thumbnails.forEach(value=>{
        console.log(value.photo);
    })

{owner: 7, thumbnail_url: "images/CACHE/images/barack_obama-2/888e0a85a1c0244831ec95e6a6716347.jpg", created_at: "2018-02-07"}
{owner: 7, thumbnail_url: "images/CACHE/images/170622210800-barack-obama-file-full-169/2560197d333c86930614c29755ef5237.jpg", created_at: "2018-02-07"}

我正在尝试从数组内的照片中获取 thumbnail_url。但我无法做到这一点。有人可以帮我解决这个问题吗？

更新：当我尝试这个时

console.log(props.thumbnails[0].photo)

结果

{owner: 7, thumbnail_url: "images/CACHE/images/barack_obama-2/888e0a85a1c0244831ec95e6a6716347.jpg", created_at: "2018-02-07"}

更新 2：代码

console.log(JSON.stringify(props.thumbnails))

结果

[{"photo":{"owner":7,"thumbnail_url":"images/CACHE/images/barack_obama-2/888e0a85a1c0244831ec95e6a6716347.jpg","created_at":"2018-02-07"},"tag":"6"},{"photo":{"owner":7,"thumbnail_url":"images/CACHE/images/170622210800-barack-obama-file-full-169/2560197d333c86930614c29755ef5237.jpg","created_at":"2018-02-07"},"tag":"6"},{"photo":{"owner":7,"thumbnail_url":"images/CACHE/images/barack_obama-2_4xWOj4h/8ff56440afd36924b5c4f4edc34e0abf.jpg","created_at":"2018-02-07"},"tag":"6"},{"photo":{"owner":7,"thumbnail_url":"images/CACHE/images/bck/3dc4db87dc07448888be58dc34ed7be0.jpg","created_at":"2018-02-07"},"tag":"6"},{"photo":{"owner":7,"thumbnail_url":"images/CACHE/images/barack_obama-2_RtQE7Dh/8b308f5d48591b1cd14141a68ddd0aa5.jpg","created_at":"2018-02-07"},"tag":"6"},{"photo":{"owner":7,"thumbnail_url":"images/CACHE/images/obama_rEmzr6f/5c7e1a1698c28f9d03a3c3f0f28b430d.jpg","created_at":"2018-02-07"},"tag":"6"},{"photo":{"owner":7,"thumbnail_url":"images/CACHE/images/President_Barack_Obama_mpU4fZP/1712b21906092dd6931d76604f20874a.jpg","created_at":"2018-02-07"},"tag":"6"},{"photo":{"owner":6,"thumbnail_url":"images/CACHE/images/obama_d7uqGPL/b75e7e2bca6c3189303c307aed640b96.jpg","created_at":"2018-02-07"},"tag":"6"}]

【问题讨论】：

已经尝试过 value.photo["thumbnail_url"] ?
好的。让我试试吧
你确定你有初始渲染的数据吗？
@ilovecse 你在做 something 不同，因为错误表明这是未定义的。请出示minimal reproducible example 来说明问题。
只是一个猜测，但我认为当您执行console.log(value.photo) 时，您会在打印实际数据之前打印undefined。

标签： javascript reactjs foreach jsx

【解决方案1】：

我已经尝试过您的jsfiddle 代码。您已将 props.thumbnails 初始化为错误的格式。查看line 23。这就是props.thumbnails 在初次调用时的迭代。这就是您收到错误 undefined 的原因。

修改代码

sharedThumbs: [{ thumbnail_url: '' }],

到

sharedThumbs: [{ photo:{ owner:0, thumbnail_url: '' } }],

【讨论】：

【解决方案2】：

不要使用foreach，而是使用props.thumbnails.map(thumbail => {})；

props.thumbnails.map(thumbnail => console.log(thumbnail));

【讨论】：

这会有什么不同？
有什么区别？
map 用于返回一个新数组。如果您对返回值不感兴趣，请改用forEach。