在将属性推入数组ReactJS之前，请检查是否满足条件

Question

我想知道是否有人知道一种方法，如果满足条件，可以将数据属性推送到数组中。例如，我使用的代码从api中获取数据。我要特别查找的数据是图片。这是我的代码：

for (const key in petData.animals) {
loadedData.push({
id: key,
photo: petData.animals[key].photos[0],
name: petData.animals[key].name,
description: petData.animals[key].description,
});
}

我的问题源于这样一个事实，即一些数据条目缺少照片。因此，每当我真正运行该应用程序时，我都会收到一个错误，说照片是未定义的。是否可以添加类似于if photo===undefined=>的条件(如果可以，如何添加？(；使用默认图片，或者如果照片===true=>使用api中的照片？

Answer 1

在过去几年中，这样做的方法是增量检查，如下所示：

for (const key in petData.animals) {
let photo = defaultPhoto;
if (petData.animals[key].photos && petData.animals[key].photos[0]) {
photo = petData.animals[key].photos[0];
}
loadedData.push({
id: key,
photo: photo,
name: petData.animals[key].name,
description: petData.animals[key].description,
});
}

然而，我们现在有了可选的链接运算符(?.(和零合并运算符(??(，所以我们可以更简洁地做到这一点，比如：

for (const key in petData.animals) {
loadedData.push({
id: key,
photo: petData.animals[key]?.photos?.[0] ?? defaultPhoto,
name: petData.animals[key].name,
description: petData.animals[key].description,
});
}