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

时间：2020-04-01 08:33:34

标签： javascript reactjs google-cloud-firestore react-native-android react-native-firebase

我正在使用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]

2 个答案:

答案 0 :(得分：2)

我看到的一件事是，在uploadPhotoAsync中您拥有：

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

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

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

答案 1 :(得分：1)

欢迎来到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

除此之外，似乎还有一个Bug会影响以前版本中的Reactjs-您可以检查Github问题here-应该不会影响您的库，但是将其检查为好。

我还发现了一些可能的问题，这些问题可能会在使用Android时影响您的React。它们通常与您正在使用catch及其相关的更改（您处理它们的方式）有关，例如，例如，在捕获之后添加：throw error;赶上来解决错误-您可以从社区here检入另一个问题。

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

在那之后，让我知道信息是否对您有所帮助！

相关问题
最新问题