React Native 防止未定义对象

Question

我正在从 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>

Answer 1

如果要访问嵌套对象的多个属性，则应检查所有内容，如下所示<View> // Checking everthing so it never throws an error&nbsp; &nbsp; {props.enclosures && props.enclosures[0] && props.enclosures[0].url ?&nbsp; &nbsp; &nbsp;<Image source={{uri:props.enclosures[0].url}} style={styles.mainPhoto} />&nbsp; &nbsp; &nbsp;:&nbsp; &nbsp; &nbsp;<Text>No Image</Text>&nbsp; &nbsp; }</View>

Answer 2

为了防止未定义错误，您还可以使用Ramda 库中的路径。它允许您安全地访问任何嵌套的对象/数组。const MyComponent = (props) => {&nbsp; const apiImage = path(["enclosures", 0, "url"], props);&nbsp; return {&nbsp; &nbsp; &nbsp; <View>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{apiImage ?&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Image source={{uri:apiImage}} style={styles.mainPhoto} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Text>No Image</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; </View>&nbsp;&nbsp;&nbsp; }}