Javascript 如何通过忽略具有未定义属性的元素来过滤数组？

我正在尝试将图像URL映射到一个化身组件。我使用的数据来自谷歌图书API。数据资源是一组对象（书籍）。某些对象缺少我所针对的“缩略图”字段的值

如果这些对象没有“缩略图”的值，我希望忽略它们，并继续通过数组进行映射

我正在使用React Native和Expo

我尝试过关于堆栈溢出的各种方法，包括array.filter（）和array.map（）之前的数据逻辑。所有推荐的解决方案都不起作用

我收到的错误是：

TypeError:TypeError:undefined不是对象（正在计算“url.volumeInfo.imageLink.thumbnail”）

看起来我甚至不能在“if”语句中使用该路径，这对我来说很奇怪——因为即使该值未定义，为什么这会重要

renderCategory() {

        if (this.props.adventure.payload[0]) {
        const fetched_Book = this.props.adventure.payload;
        const filteredThumbnails = fetched_Book.filter(url =>{

           // The console log below shows 4 urls before it fails)
            console.log('URL', url.volumeInfo.imageLinks.thumbnail)

            if(typeof url.volumeInfo.imageLinks.thumbnail === "undefined"){
                return false
            }
            else return true;
            })
        const allThumbnails= filteredThumbnails.map(book => book.volumeInfo.imageLinks.thumbnail);
        return (
            <>
                <View style={styles.thumbnailContainer}>
                    {
                        allThumbnails.map((l, i) =>
                            <Avatar
                                key={i}
                                size="large"
                                source={{ uri: l }}
                                style={styles.thumbNail}
                                onPress={() => this.onSelectedBook(fetched_Book, i)}
                            />
                        )
                    }
                </View>

            </>
        )
    }
    else return ''
    }

renderCategory（）{
if（this.props.advention.payload[0]）{
const fetched_Book=this.props.advention.payload；
const filteredThumbnails=fetched\u Book.filter（url=>{
//下面的控制台日志显示了失败前的4个URL）
log（'URL'，URL.volumeInfo.imageLinks.缩略图）
如果（url.volumeInfo.imageLinks.thumbnail的类型==“未定义”）{
返回错误
}
否则返回true；
})
const allThumbnails=filteredThumbnails.map（book=>book.volumeInfo.imageLinks.thumbnails）；
返回(
{
所有缩略图.map（（l，i）=>
这个.onSelectedBook（取回的书，我）}
/>
)
}
)
}
否则返回“”
}

---

预期的输出是一个新的过滤对象数组，然后可以映射到我的化身组件。

此错误意味着缩略图路径的某些部分不存在，因此您需要检查该路径的每个部分是否存在：

const filteredThumbnails = fetched_Book
  .filter(url => !!url && !!url.volumeInfo && !!url.volumeInfo.imageLinks && typeof url.volumeInfo.imageLinks.thumbnail === 'undefined')

---

此错误意味着缩略图路径的某些部分不存在，因此您需要检查该路径的每个部分是否存在：

const filteredThumbnails = fetched_Book
  .filter(url => !!url && !!url.volumeInfo && !!url.volumeInfo.imageLinks && typeof url.volumeInfo.imageLinks.thumbnail === 'undefined')

---

在某些情况下，

imageLink

或

volumeInfo

字段很可能不存在。因此，您正在调用

unknown.thumbnail

，它将为您提供一个error@Andyk. 谢谢你的评论！您是正确的，检查imageLinks属性是否存在解决了我的问题。您有没有关于扩展此功能的建议？我观察到GoogleBooksAPI非常不稳定，随机出现数据丢失的情况。似乎我不能以一种有效的方式检查一个大对象中所有缺失值的实例。有几种方法可以做到这一点。除非您有嵌套5 level+的对象，否则我认为只需检查

是否（url.volume.imageLink&&url.volume.imageLink.缩略图）

@Andyk就可以了。我很感激你的帮助和有用的链接，我很高兴你的帮助。请记住向上投票选择您认为有用的答案，向下投票选择低质量的答案，以便稍后访问的人可以轻松找到有用的信息。在某些情况下，

imageLink

或

volumeInfo

字段很可能不存在。因此，您正在调用

unknown.thumbnail

，它将为您提供一个error@Andyk. 谢谢你的评论！您是正确的，检查imageLinks属性是否存在解决了我的问题。您有没有关于扩展此功能的建议？我观察到GoogleBooksAPI非常不稳定，随机出现数据丢失的情况。似乎我不能以一种有效的方式检查一个大对象中所有缺失值的实例。有几种方法可以做到这一点。除非您有嵌套5 level+的对象，否则我认为只需检查

是否（url.volume.imageLink&&url.volume.imageLink.缩略图）

@Andyk就可以了。我很感激你的帮助和有用的链接，我很高兴你的帮助。记住，对你觉得有用的答案投赞成票，对质量不高的答案投反对票，这样以后访问的人可能会很容易找到有用的信息。