反应本机图像选择器错误：未定义不是对象答案

【问题标题】：react native image picker error : undefined is not an object反应本机图像选择器错误：未定义不是对象
【发布时间】：2022-08-13 09:36:43
【问题描述】：

我实现了从图书馆获取照片，但是当我没有在库中选择照片而只是取消时，我得到了错误undefined 不是对象（评估 \'response.assets[0]\'）

我认为这是因为我没有选择照片时 response.assets[0].uri 可能为空。我该如何解决这个问题？

这是我的代码 CameraScreen.js

import React, {Component} from \'react\'
import { View, Text, StyleSheet, Image, TouchableOpacity } from \'react-native\'
import {launchCamera, launchImageLibrary } from \'react-native-image-picker\'

class CameraScreen extends Component {
  state = {
    avatar: \'\'
  }

  showImage = () => {
    launchImageLibrary({}, (response)=>{
      alert(response.assets[0].uri)
      this.setState({
        avatar: response.assets[0].uri
      })
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <Image
          source={{uri:this.state.avatar}}
          style={styles.avatar}
        />
        <TouchableOpacity
          style={styles.buttonStyle}
          activeOpacity={0.5}
          onPress={() => {this.showImage()}}
        >
          <Text style={styles.buttonTextStyle}>영수증 등록하기</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

在设置状态之前，添加这一行if (response.didCancel) return;

标签： react-native react-native-image-picker

【解决方案1】：

你可以这样使用：

launchImageLibrary({}, response => {
            console.log("Response = ", response);
            if (response.didCancel) {
                console.log("User cancelled image picker");
                alert("User cancelled image picker");
            } else if (response.errorCode) {
                console.log("ImagePicker ErrorCode: ", response.errorCode);
                alert("ImagePicker ErrorCode: " + response.errorCode);
            } else if (response.errorMessage) {
                console.log("ImagePicker ErrorMessage: ", response.errorMessage);
                alert("ImagePicker ErrorMessage: " + response.errorMessage);
            } else {
                let source = response;
                const uri = response?.assets && response.assets[0].uri;
                this.setState({
                    avatar: uri
                });
            }
        });

【讨论】：

【解决方案2】：

条件显示头像（如果已定义）

{
state.avatar &&
<Image
          source={{uri:this.state.avatar}}
          style={styles.avatar}
        />
}

【讨论】：