我尝试用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
1条答案
按热度按时间ego6inou1#
请尝试以下选项,它可能会工作。
**1.**检查您的网络安全配置设置是否允许http请求。
**2.**请检查您计算机IP地址并尝试。您计算机的localhost无法从另一台计算机访问。如果要访问localhost,则两台计算机必须连接到同一网络。
**3.**最后一个选项是使用ngrok从任何地方访问您本地主机。它将生成2个链接到您的本地主机,一个是http,第二个是https,您可以使用这两个链接来调用您的API。