如何检查深层嵌套道具

Question

我经常发现自己必须在映射数组之前构建长链以检查它是否已定义:

this.props.photos &&
this.props.photos.activePhotos &&
this.props.photos.activePhotos.map(...

如果我遗漏了this.props.photos &&,this.props.photos.activePhotos.length &&我的整个应用程序将崩溃,如果photos或activePhotos未定义.

有没有办法检查这些道具,而无需检查我的最终项目的每个父对象/数组？

Answer 1

另一种方法是在解构道具时使用道具的默认值:

const active = this.props?.photos?.activePhotos

在这种情况下,如果photos未定义,则将替换为空对象.试图activePhotos摆脱它会给你一个空数组,允许你在任何情况下映射它.