* Возможный необработанный отказ от обещания (id: 0): Ошибка типа: undefined не является объектом (отмечая «result.cancelled») Загрузка облачного изображения

Question

Кто-нибудь может мне помочь. У меня есть этот проект, где я должен загрузить изображение в облачный. проблема здесь в том, что есть предупреждение Возможный необработанный отказ от обещания (id: 0): Ошибка типа: undefined не является объектом (отмечая «result.cancelled») Может ли кто-нибудь мне помочь?

Вот мой конструктор

    constructor(props) {
  super(props);
this.state = {
  image: '',
  receiptamount: '',
  driverusername: '',
  requesterusername: '', 
  avatarSource: '',
};
}

Вот моя функция

    pickImage = async () => {
      let result = await ImagePicker.showImagePicker(options, (response) => {
        console.log('Response = ', response);

        if (response.didCancel) {
          console.log('User cancelled image picker');
        } else if (response.error) {
          console.log('ImagePicker Error: ', response.error);
        } else if (response.customButton) {
          console.log('User tapped custom button: ', response.customButton);
        } else {
          const source = { uri: 'data:image/jpeg;base64,' + response.data }

          this.setState({
            image: 

response.uri,
      });
      console.log( {uri: response.uri});
      // You can also display the image using data:
      // const source = { uri: 'data:image/jpeg;base64,' + response.data };

      this.setState({
        avatarSource: source,
      });
    }
  });

    if (!result.cancelled) {


        // url generation via cloudinary
        let base64Img = this.state.avatarSource;

        //Add your cloud name
        let apiUrl = 'https://api.cloudinary.com/v1_1/kusinahanglan/image/upload';

        let data = {
          file: base64Img,
          upload_preset: 'bgzuxcoc',
          cloud_name : 'kusinahanglan',
        };

        fetch(apiUrl, {
          method: 'POST',

      body: JSON.stringify(data),
      headers: {
        'content-type': 'multipart/form-data',
      },

    }).then(r => {
      data = r._bodyText;
      console.log('data value:' + data)
      // uploads url to image as generated from cloudinary
      firebase.database().ref('receipts/' + this.state.requesterusername).set({
        imagename: JSON.parse(r._bodyText).public_id + "." + JSON.parse(r._bodyText).format,
        imageurl: JSON.parse(r._bodyText).secure_url,
        receiptamount: this.state.receiptamount,
        driverusername: this.state.driverusername,
        requesterusername: this.state.requesterusername,

        });
    });
  }
};



render() {
  return (
    <View style={styles.container}>

                            <TextInput
        value1={this.state.receiptamount}
        placeholder = "receipt amount"
        onChangeText = {(value1) => this.setState({receiptamount:value1})}
        />

                                    <TextInput
        value2={this.state.driverusername}
        placeholder = "driver username"
        onChangeText = {(value2) => this.setState({driverusername:value2})}
        />

                                      <TextInput
        value3={this.state.requesterusername}
        placeholder = "requester username"
        onChangeText = {(value3) => this.setState({requesterusername:value3})}
        />

      <TouchableOpacity
        onPress={() => this.pickImage()}
        style={{ width: 200, alignSelf: 'center' }}>
        <View style={{ backgroundColor: 'transparent' }}>
          {this.state.image
            ? <Image
                source={{ uri: this.state.image }}
                style={{
                  width: 200,
                  height: 200,
                  borderRadius: 100,
                  alignSelf: 'center',
                }}
              />
            : <View
                style={{
                  backgroundColor: 'grey',
                  width: 200,
                  height: 200,
                  borderRadius: 100,
                }}
              />}


        </View>
      </TouchableOpacity>
    </View>
  );
}
}

const styles = StyleSheet.create({
container: {
  flex: 1,
  alignItems: 'center',
  justifyContent: 'center',

  backgroundColor: '#ecf0f1',
},
});

Answer 1

Результат от ImagePicker будет неопределенным, так как библиотека там ничего не возвращает. Вместо этого поместите ваш код в response.didCancel.

let result = await ImagePicker.showImagePicker(options, (response) => {
    console.log('Response = ', response);

    if (response.didCancel) {
      console.log('User cancelled image picker');

    // url generation via cloudinary
    let base64Img = this.state.avatarSource;

    //Add your cloud name
    let apiUrl = 'https://api.cloudinary.com/v1_1/kusinahanglan/image/upload';

    let data = {
      file: base64Img,
      upload_preset: 'bgzuxcoc',
      cloud_name : 'kusinahanglan',
    };

    fetch(apiUrl, {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'content-type': 'multipart/form-data',
      }
    }).then(r => {
      data = r._bodyText;
      console.log('data value:' + data)
      // uploads url to image as generated from cloudinary
      firebase.database().ref('receipts/' + this.state.requesterusername).set({
    imagename: JSON.parse(r._bodyText).public_id + "." + JSON.parse(r._bodyText).format,
    imageurl: JSON.parse(r._bodyText).secure_url,
    receiptamount: this.state.receiptamount,
    driverusername: this.state.driverusername,
    requesterusername: this.state.requesterusername,

    });
});
    } else if (response.error) {
      console.log('ImagePicker Error: ', response.error);
    } else if (response.customButton) {
      console.log('User tapped custom button: ', response.customButton);
    } else {
      const source = { uri: 'data:image/jpeg;base64,' + response.data }

      this.setState({
        image: response.uri,
  });
  console.log( {uri: response.uri});
  // You can also display the image using data:
  // const source = { uri: 'data:image/jpeg;base64,' + response.data };

  this.setState({
    avatarSource: source,
  });
}

});