从expo获取API react本机提供Ty[error:网络连接失败

5us2dqdw  于 2023-03-03  发布在  React
关注(0)|答案(1)|浏览(160)

我尝试用mongodb建立一个带有电话号码的注册页面,数据库与nodejs成功连接,但当我尝试从用户提交数据时,它给出了(类型错误:网络连接失败)
Signup.js页面这是注册屏幕,它包含submitData方法,用于从API获取数据并保存新的提交值

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Button, TextInput, TouchableOpacity, ActivityIndicator } from 'react-native';
import EvilIcons from '@expo/vector-icons/EvilIcons';
import { useNavigation } from '@react-navigation/native';
import AppLoader from '../component/AppLoader';
export default function Signup() {
   const navigation = useNavigation()
   const [phone, setPhone] = useState('');
   const [isLoading, setIsLoading] = useState(true)
   const submitData = ()=>{
    fetch("http://10.0.2.2:3000/send-data" ,{
      method:"POST",
      headers:{
        'Content-Type' :'application/json'
      },
      body:JSON.stringify({
        phone:phone
      })
    }).then(res=>res.json())
    .then(data =>{
      
      console.log(data)
      alert("Done")
    }).catch(err =>{
      alert(err)
    })

   }

  

  return (
     <View style={styles.container}>
       <Text style={styles.text1} >Welcome To Gamifier CheckIn</Text>
       <Text style={styles.text2}> Type your number and become our guest!</Text>
     <TextInput style={styles.inputBox}
       placeholder="  +966"
       onChangeText={phone => setPhone({phone})}
     />
     <TouchableOpacity onPress={() => submitData() && navigation.navigate('Rewards1')}>
     <EvilIcons name='arrow-right' size={55} color='#FBBD0A'></EvilIcons>
    
     </TouchableOpacity>
 
    </View>
  );

  }

App.js服务器

type hconst express = require('express');
const app =  express();
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

const mongURL = "mongodb+srv://checkIn-admin:tAGaZ7sp38Qw43oG@cluster0.odzlhm2.mongodb.net/?retryWrites=true&w=majority"

require('./User')
const User = mongoose.model("User")
app.use(bodyParser.json())

mongoose.connect(mongURL,{
    useNewUrlParser: true,
    useUnifiedTopology: true
 } )

 mongoose.connection.on("connected",()=>{
    console.log("Connected Successfully!")
 })
 mongoose.connection.on("error",(err)=>{
    console.log("error", err)
 })

 app.post('/update',(req,res)=>{
    User.findByIdAndUpdate(req.body.id,{
        phone:req.body.phone
    }).then(data =>{
        console.log(data)
        res.send(data)
    }).catch(err =>{
        console.log('error',err)
    })
 })
 
app.post('/send-data',(req,res)=>{
    const user = new User({
        phone:req.body.phone
    })
    user.save()
    .then(data =>{
        console.log(data)
        res.send(data)
    }).catch(err => {
        console.log(err)
    })
})
app.get('/',(req,res)=>{
    User.find({})
    .then(data =>{
        console.log(data)
        res.send(data)
    }).catch(err => {
        console.log(err)
    })
    
}
)
app.listen(3000,()=>{
    console.log("Listening on 3000 ")
})ere
ego6inou

ego6inou1#

请尝试以下选项,它可能会工作。

**1.**检查您的网络安全配置设置是否允许http请求。
**2.**请检查您计算机IP地址并尝试。您计算机的localhost无法从另一台计算机访问。如果要访问localhost,则两台计算机必须连接到同一网络。
**3.**最后一个选项是使用ngrok从任何地方访问您本地主机。它将生成2个链接到您的本地主机,一个是http,第二个是https,您可以使用这两个链接来调用您的API。

相关问题