javascript - React Native 防止 undefined object

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
    {props.enclosures && props.enclosures[0] && props.enclosures[0].url ?
     <Image source={{uri:props.enclosures[0].url}} style={styles.mainPhoto} />
     :
     <Text>No Image</Text>
    }
</View>