可能未处理的承诺拒绝（ID：1）：类型错误：网络请求失败

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！

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

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

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

我还可以找到一些可能会在使用 Android 时影响您的 React 的问题。 它们通常与您正在使用的catch和一些更改有关 - 您处理它们的方式，主要是 - 例如，添加： throw error; 在您捕获之后，为了使捕获起作用，错误-因为您可以在此处查看来自社区的另一个问题。

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

之后让我知道这些信息是否对您有帮助！

可能未处理的承诺拒绝（ID：1）：类型错误：网络请求失败

问题描述

2 个解决方案

解决方案1
2 2020-04-01 08:47:02

解决方案2
1 已采纳 2020-04-01 10:47:16

可能未处理的承诺拒绝（ID：1）：类型错误：网络请求失败

问题描述

2 个解决方案

解决方案1 2 2020-04-01 08:47:02

解决方案2 1 已采纳 2020-04-01 10:47:16

解决方案1
2 2020-04-01 08:47:02

解决方案2
1 已采纳 2020-04-01 10:47:16