javascript - React Native防止 undefined object

我正在从API抓取数据以显示基于API值的图像。如果对象中有图像，则以下代码可以完美工作。如果API项没有图像，则应用会引发“未定义不是对象”错误。

<View>
 <Image source={{uri:props.enclosures[0].url}} style={styles.mainPhoto} />
</View>

我尝试了以下代码来检查该值是否首先存在，但是如果API项没有图像，它仍然会引发完全相同的错误。

<View>
{props.enclosures[0].url ?
 <Image source={{uri:props.enclosures[0].url}} style={styles.mainPhoto} />
 :
 <Text>No Image</Text>
}
</View>

最佳答案

如果要访问嵌套对象的多个属性，则应检查所有内容，例如

<View> // Checking everthing so it never throws an error
    {props.enclosures && props.enclosures[0] && props.enclosures[0].url ?
     <Image source={{uri:props.enclosures[0].url}} style={styles.mainPhoto} />
     :
     <Text>No Image</Text>
    }
</View>