React Native:控制台警告可能未处理的承诺拒绝(id:0):TypeError:无法读取null的属性'uri' 尝试修复

我正在关注有关在 React Native 中将照片上传到 Firebase 的教程,并使用“react-native-image-picker”和“launchImagelibrary”(而不是教程中的“showImagePicker”,因为它不是使用时间更长)。但是,当我单击“上传图片”按钮时,出现此错误/警告:

React Native:控制台警告可能未处理的承诺拒绝(id:0):TypeError:无法读取null的属性'uri'
      
    尝试修复

我的 UploadScreen.js 文件如下:

import React,{ useState } from 'react';
import {
  View,SafeAreaView,Text,TouchableOpacity,StyleSheet,Platform,Alert,Image
} from 'react-native';
import * as ImagePicker from 'react-native-image-picker';
import storage from '@react-native-firebase/storage';
import * as Progress from 'react-native-progress';

export default function UploadScreen() {

  const [image,setImage] = useState(null);
  const [uploading,setUploading] = useState(false);
  const [transferred,setTransferred] = useState(0);

  const selectImage = () => {
    const options = {
      maxWidth: 2000,maxHeight: 2000,storageOptions: {
        skipBackup: true,path: 'images'
      }
    };
    ImagePicker.launchImagelibrary(options,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: response.uri };
        console.log(source);
        setImage(source);
      }
    });
  };

  const uploadImage = async () => {
    const { uri } = image;
    const filename = uri.substring(uri.lastIndexOf('/') + 1);
    const uploadUri = Platform.OS === 'ios' ? uri.replace('file://','') : uri;
    setUploading(true);
    setTransferred(0);
    const task = storage()
      .ref(filename)
      .putFile(uploadUri);
    // set progress state
    task.on('state_changed',snapshot => {
      setTransferred(
        Math.round(snapshot.bytesTransferred / snapshot.totalBytes) * 10000
      );
    });
    try {
      await task;
    } catch (e) {
      console.error(e);
    }
    setUploading(false);
    Alert.alert(
      'Photo uploaded!','Your photo has been uploaded to Firebase Cloud Storage!'
    );
    setImage(null);
  };

  return (
    <SafeAreaView style={styles.container}>
      <TouchableOpacity style={styles.selectButton} onPress={selectImage}>
        <Text style={styles.buttonText}>Pick an image</Text>
      </TouchableOpacity>
      <View style={styles.imageContainer}>
        {image !== null ? (
          <Image source={{ uri: image.uri }} style={styles.imageBox} />
        ) : null}
        {uploading ? (
          <View style={styles.progressBarContainer}>
            <Progress.Bar progress={transferred} width={300} />
          </View>
        ) : (
          <TouchableOpacity style={styles.uploadButton} onPress={uploadImage}>
            <Text style={styles.buttonText}>Upload image</Text>
          </TouchableOpacity>
        )}
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,alignItems: 'center',backgroundColor: '#bbded6'
  },selectButton: {
    borderRadius: 5,width: 150,height: 50,backgroundColor: '#8ac6d1',justifyContent: 'center'
  },selectButton2: {
    borderRadius: 5,justifyContent: 'center',marginTop: 20
  },uploadButton: {
    borderRadius: 5,backgroundColor: '#ffb6b9',buttonText: {
    color: 'white',fontSize: 18,fontWeight: 'bold'
  },imageContainer: {
    marginTop: 30,marginBottom: 50,alignItems: 'center'
  },progressBarContainer: {
    marginTop: 20
  },imageBox: {
    width: 300,height: 300
  }
});

是什么导致了这个警告,我该如何解决?

尝试修复

  1. AFTAB
const selectImage = () => {
    const options = {
      maxWidth: 2000,response.customButton);
      } else {
        const  uri = image?.uri;
        console.log(source);
        setImage(response);
      }
    });
  };

结果:

React Native:控制台警告可能未处理的承诺拒绝(id:0):TypeError:无法读取null的属性'uri'
      
    尝试修复

  1. 拉曼
import React,setImage] = useState("");
  const [uploading,response.customButton);
      } else {
        const source = { uri: response?.uri };
        console.log(source);
        setImage(source);
      }
    });
  };

  const uploadImage = async () => {
    const { uri } = image;
    const filename = uri.substring(uri.lastIndexOf('/') + 1);
    const uploadUri = Platform.OS === 'ios' ? uri.replace('file://','Your photo has been uploaded to Firebase Cloud Storage!'
    );
    setImage("");
  };

  return (
    <SafeAreaView style={styles.container}>
      <TouchableOpacity style={styles.selectButton} onPress={selectImage}>
        <Text style={styles.buttonText}>Pick an image</Text>
      </TouchableOpacity>
      <View style={styles.imageContainer}>
        {image !== "" && image !== undefined && (
          <Image source={{ uri: image?.uri }} style={styles.imageBox} />
        )}
        {uploading ? (
          <View style={styles.progressBarContainer}>
            <Progress.Bar progress={transferred} width={300} />
          </View>
        ) : (
          <TouchableOpacity style={styles.uploadButton} onPress={uploadImage}>
            <Text style={styles.buttonText}>Upload image</Text>
          </TouchableOpacity>
        )}
      </View>
    </SafeAreaView>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,height: 300
  }
});

结果:

React Native:控制台警告可能未处理的承诺拒绝(id:0):TypeError:无法读取null的属性'uri'
      
    尝试修复

更新代码后控制台报错:

React Native:控制台警告可能未处理的承诺拒绝(id:0):TypeError:无法读取null的属性'uri'
      
    尝试修复

laji2525 回答:React Native:控制台警告可能未处理的承诺拒绝(id:0):TypeError:无法读取null的属性'uri' 尝试修复

您在这里遇到了问题:

ImagePicker.launchImageLibrary(options,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: response?.uri };
        console.log(source);
        setImage(source);
      }
    });

您必须将图像设置为:

setImage(response);

然后你就可以这样了:

 const  uri = image?.uri;
,

显示警告是因为 URI 为空。确保您已正确获取 URL 响应并尝试此代码。

export default function UploadScreen() {

  const [image,setImage] = useState("");
  const [uploading,setUploading] = useState(false);
  const [transferred,setTransferred] = useState(0);

  const selectImage = () => {
    const options = {
      maxWidth: 2000,maxHeight: 2000,storageOptions: {
        skipBackup: true,path: 'images'
      }
    };
    ImagePicker.launchImageLibrary(options,response.customButton);
      } else {
        const source = { uri: response?.uri };
        console.log(source);
        setImage(source);
      }
    });
  };

  const uploadImage = async () => {
    const { uri } = image;
    if (uri) {
      const filename = uri.substring(uri.lastIndexOf('/') + 1);
      const uploadUri = Platform.OS === 'ios' ? uri.replace('file://','') : uri;
     setUploading(true);
     setTransferred(0);
     const task = storage()
       .ref(filename)
       .putFile(uploadUri);
     // set progress state
     task.on('state_changed',snapshot => {
      setTransferred(
        Math.round(snapshot.bytesTransferred / snapshot.totalBytes) * 10000
      );
    });
   }
    try {
      await task;
    } catch (e) {
      console.error(e);
    }
    setUploading(false);
    Alert.alert(
      'Photo uploaded!','Your photo has been uploaded to Firebase Cloud Storage!'
    );
    setImage("");
  };

  return (
    <SafeAreaView style={styles.container}>
      <TouchableOpacity style={styles.selectButton} onPress={selectImage}>
        <Text style={styles.buttonText}>Pick an image</Text>
      </TouchableOpacity>
      <View style={styles.imageContainer}>
        {image !== "" && image !== undefined && (
          <Image source={{ uri: image?.uri }} style={styles.imageBox} />
        )}
        {uploading ? (
          <View style={styles.progressBarContainer}>
            <Progress.Bar progress={transferred} width={300} />
          </View>
        ) : (
          <TouchableOpacity style={styles.uploadButton} onPress={uploadImage}>
            <Text style={styles.buttonText}>Upload image</Text>
          </TouchableOpacity>
        )}
      </View>
    </SafeAreaView>
  );
}

本文链接:https://www.f2er.com/190.html

大家都在问