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

    {props.enclosures && props.enclosures[0] && props.enclosures[0].url ?

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

     :

     <Text>No Image</Text>

    }

</View>

Answer 2

为了防止未定义错误，您还可以使用Ramda 库中的路径。它允许您安全地访问任何嵌套的对象/数组。

const MyComponent = (props) => {

  const apiImage = path(["enclosures", 0, "url"], props);

  return {

      <View>

         {apiImage ?

         <Image source={{uri:apiImage}} style={styles.mainPhoto} />

          :

         <Text>No Image</Text>

         }

      </View>  

  }

}