可能的未处理承诺拒绝（id：1）：TypeError：网络请求失败

Question

我正在使用 react native verion >0.6 我正在使用 nodejs 在我的手机中运行我的应用程序 我有稳定的互联网连接 我正在制作一个注册页面，我想在其中上传照片并进行连接 它到firestore数据库

我的 App.js 代码：

import React from 'react';
import {View,Text,StyleSheet,TextInput,TouchableOpacity,Image,ImageBackground,StatusBar,SafeAreaView} from "react-native";
import * as firebase from 'firebase';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import ImagePicker from 'react-native-image-crop-picker'
import Icons from "react-native-vector-icons/MaterialIcons"
import FireScreen from './FireScreen';

var firebaseConfig = {};
 require("firebase/firestore")
 export default class RegisterScreen extends React.Component {

static navigationOptions = {
    headerShown:false,
    headerColor:"#161F3D"
};

state={
    name:"",
    email:"",
    password:"",
    errorMessage: null,
    image:null,
    uri:""
};

handleSignUp = () => {
    firebase.auth().createUserWithEmailAndPassword(this.state.email,this.state.password)
    .then(userCredentials => {
        return userCredentials.user.updateProfile({
            displayName:this.state.name

        });
    })
    .catch(error => this.setState({errorMessage : error.message}));
};

handlePost=() =>{
    FireScreen.shared.addPost({localUri: this.state.image}).then(ref =>{
        this.setState({image:null})
        this.props.navigation.goBack()
    })
    .catch(error => {alert(error);})
}
render() {
    return (

        <SafeAreaView style={styles.container}>
    <StatusBar barStyle="light-content" backgroundColor="#161F3D" animated={true}></StatusBar>
    <ImageBackground source={require('../assets/test.jpg')} style={{height:"100%",width:"100%"}}>

    <KeyboardAwareScrollView>

        <TouchableOpacity style={styles.avatar} onPress={() => {

            ImagePicker.openPicker({width: 500,height: 500,cropping: true,sortOrder: 'none',compressImageMaxWidth: 1000,compressImageMaxHeight: 1000, compressImageQuality: 1,compressVideoPreset: 'MediumQuality',includeExif: true,cropperCircleOverlay:true}).then(image => {
            this.setState({ image: {uri: image.path, width: image.width, height: image.height, mime: image.mime},uri:image.path});
            }).catch(error => this.setState({errorMessage:error.message}))
            }
            }>
            <Image style={styles.avatarPhoto} source={{isStatic:true,uri:this.state.uri}}/>
            <Icons name="add" size={40} color="#000" style={{alignSelf:"center",marginTop:-85}} />
            </TouchableOpacity>

             <Image source={require("../assets/logo.png")} style={{height:140,width:200,marginLeft:200,marginTop:-135}}></Image>

        <View style={styles.errorMessage}>
            {
              this.state.errorMessage && <Text style={styles.error}>{this.state.errorMessage}</Text>}
        </View>

        <View style={styles.form}>



        <View style={{marginTop:32}}>

             <TextInput style={styles.input} 
                placeholder="Name"
                autoCapitalize="none" 
                underlineColorAndroid="transparent"
                onChangeText={name => this.setState({ name })}
                value={this.state.name}>
            </TextInput>
        </View>    


        <View style={{marginTop:32}}>

             <TextInput style={styles.input} 
             placeholder="Email ID"
                autoCapitalize="none" 
                onChangeText={email => this.setState({ email })}
                value={this.state.email}>
            </TextInput>
        </View>

            <View style={{marginTop:32}}>

                <TextInput style={styles.input} 
                 placeholder="Password"
                 secureTextEntry
                 autoCapitalize="none"
                 maxLength={20}

                 onChangeText={password => this.setState({ password })}
                 value={this.state.password}
                 >

                 </TextInput>
            </View>




        </View>

        <TouchableOpacity style={styles.button} onPress={this.handleSignUp}>
            <Text style={{color:"#FFF",fontWeight:"500"}}>Sign Up</Text>
        </TouchableOpacity>

        <TouchableOpacity style={{alignSelf:"center",marginTop:32}}
         onPress={() => 
        this.handlePost()}
         //this.props.navigation.navigate("Login")}
         >
            <Text 
            style={{color:"#414959",fontSize:13,marginTop:30,fontWeight:"800",height:23,borderRadius:20,backgroundColor:"#FFF"}}>
                Already Have An Account ? 
            <Text 

            style={{fontWeight:"800",color:"#000",textDecorationStyle:"solid"}}>  Sign In</Text></Text>

        </TouchableOpacity>

        </KeyboardAwareScrollView>
        </ImageBackground>
     </SafeAreaView>


    );
}
  }

 const styles=StyleSheet.create({
   container: {
      flex:1,
      backgroundColor:"#FFF"
    },
greeting:{
    marginTop:70,
    fontSize:18,
    fontWeight:"500",
    textAlign:"center",
    textDecorationStyle:"solid",
    color:"#161F3D",
    borderStyle:"solid",


},
errorMessage:{
    height:72,
    alignItems:"center",
    justifyContent:"center",
    marginHorizontal:30
},
error:{
    color:"#E9446A",
    fontSize:13,
    fontWeight:"600",
    textAlign:"center"
},
form:{

    marginTop:-50,
    marginBottom:50,
    marginHorizontal:40,    
},

input:{
    alignItems:"center",
    marginTop:10,
    height:40,
    fontSize:15,
    borderColor:"#BAB7C3",
    borderWidth: StyleSheet.hairlineWidth,
    borderRadius:13,
    paddingHorizontal:16,
    color:"#514E5A",
    fontWeight:"600"
  },
button:{
    marginHorizontal:100,
    backgroundColor:"#161F3D",
    borderRadius:4,
    height:52,
    alignItems:"center",
    justifyContent:"center",
    borderTopEndRadius:10,
    borderBottomEndRadius:10,
    borderTopStartRadius:10,
    borderBottomStartRadius:10,


},

avatar:{
    width:130,
    height:130,
    borderRadius:90,
    backgroundColor:"#E1E2E6",
    alignContent:"center",
    marginLeft:60,
    marginTop:100,
} ,
avatarPhoto:{
    width:130,
    height:130,
    borderRadius:90,
    backgroundColor:"#E1E2E6",
    alignContent:"center",
    marginLeft:0,
    marginTop:0,

} });

我的 FireBase 代码：

我已成功将我的应用与 firebase 连接…… 我的应用和 Firebase 没有连接问题 我已经从firebase创建了一个云firestore数据库 数据库

import firebase from "firebase"
var firebaseConfig = {

 };

class FireScreen {
constructor(){
    firebase.initializeApp(firebaseConfig);
}

addPost = async ({localUri })=>{
    const remoteUri = await this.uploadPhotoAsync(localUri);
    return new Promise((res,rej)=> {
        this.firestore.collection("profilePics").add({
            uid:this.uid,
            image:remoteUri
        })
        .then(ref =>{
            res(ref);
        })
        .catch(error =>{
            rej(error);
        })
    })
}
uploadPhotoAsync = async uri => {
    const path = 'photos/${this.uid}}.jpg'
    return new Promise(async (res,rej)=>{
        const response=await fetch(uri)
        const file =await response.blob()
        let upload = firebase.storage().ref(path).put(file)
        upload.on("state_changed", snapshot => {},err=>{
            rej(err)
        },
        async() =>{
            const url = await upload.snapshot.ref.getDownloadURL()
            res(url);
        }
        );
    });
};
get firestore() {
    return firebase.firestore();
}
get uid(){
    return (firebase.auth().currentUser || {}).uid
}

}

FireScreen.shared = new  FireScreen();
export default FireScreen;

我遇到这样的错误，请帮助我解决这个问题

 Possible Unhandled Promise Rejection (id: 2):
    TypeError: Network request failed
  onerror@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:28006:31
  @http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:34134:31
  setReadyState@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:33218:33
   __didCompleteResponse@http://localhost:8081/index.bundle?          platform=android&dev=true&minify=false:33045:29
  emit@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:3416:42
 __callFunction@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2744:49
  http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2466:31
  __guard@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:2698:15
 callFunctionReturnFlushedQueue@http://localhost:8081/index.bundle?           platform=android&dev=true&minify=false:2465:21
  callFunctionReturnFlushedQueue@[native code]

Answer 1

我看到的一件事是在uploadPhotoAsync 你有：

const path = 'photos/${this.uid}}.jpg'

但您需要法语口音 ` 而不是 '。像这样的：

const path = `photos/${this.uid}}.jpg` 这样，您将在 url 中获得 this.uid。

Answer 2

欢迎来到 Stackoverflow！

关于您的情况，根据本文所述 - Making Promises safer in Node.js - 通常错误 Unhandled Promise Rejection (id: 2): 与缓冲区清理不当有关 - id 编号 2 表示 - 导致内存问题。考虑到您的错误的另一部分 - callFunctionReturnFlushedQueue@[native code] - 实际上，它可能与您的缓冲区未被清除有关。

除此之外，在您的const path = 'photos/${this.uid}}.jpg' 行中，句子末尾缺少; - 可能会影响您管理错误的try 和catches。

除此之外，在以前的版本中似乎有一个影响 Reactjs 的错误 - 你可以检查 Github 问题 here - 这不应该影响你的库，但检查它也可能很有用。

我还可以找到一些在使用 Android 时可能会影响您的 React 的问题。它们通常与您正在使用您的 catch 相关，并对其进行一些更改 - 您处理它们的方式，主要是 - 例如，在您的 catch 之后添加：throw error;，以便 catch 起作用错误 - 您可以从社区here 签入这个其他问题。

我建议您查看它们并确认这是否对您有帮助！

如果这些信息对您有帮助，请告诉我！