来自 MongoDB 的 React Native fetch 不起作用

如何解决来自 MongoDB 的 React Native fetch 不起作用

有一个应用程序连接到我的数据库，其中包含一些我想要获取和呈现的消息。我在家里有这个工作，但我来到我女儿的妈妈家，一切都变得不正常了；类型错误消息。我正在使用 iOS 模拟器，所以我觉得存在某种问题，因为我正在从那里运行应用程序时进行 fetch 调用。请看一看并告诉我您的想法！

const express = require("express");
const http = require("http");
const app = express();
const server = http.createServer(app);
const socket = require("socket.io");
const io = socket(server);

const bodyParser = require('body-parser');
const Message = require("./models/message");
const mongoose = require('mongoose');

// MongoDB connection
mongoose.connect(
  'mongodb+srv://blahblah',{
    useNewUrlParser: true,useUnifiedTopology: true
  }).then(() => {
    console.log('Connected to the database!')
  }).catch(() => {
    console.log('Connection failed oh noooooo!')
});

// Parse the request body as JSON
app.use(bodyParser.json());

// GET messages
app.get("http://192.168.0.17:8010/api/messages",(req,res) => {
  Message.find({}).exec((err,messages) => {
    if(err) {
       res.send(err).status(500);
    } else {
       res.send(messages).status(200);
    }
  });
});

// POST messages
app.post('http://192.168.0.17:8010/api/messages',res) => {
  Message.create(req.body).then((message) => {
      res.send(message).status(200);
  }).catch((err) => {
      console.log(err);
      res.send(err).status(500);
  });
});

// Socket.io connection
io.on("connection",socket => {
  socket.emit('your id',socket.id);
  socket.on('send message',body => {
      io.emit('message',body)
  })
  console.log("connected")
})

server.listen(8010,() => console.log("server is running on port 8000",server.address()));

import React,{ useState,useEffect,useRef } from 'react';
import { StyleSheet,Text,TextInput,View,Button,FlatList,ScrollView } from 'react-native';
import io from 'socket.io-client'

const ChatRoom = () => {

  const [yourID,setYourID] = useState();
  const [messages,setMessages] = useState([]);
  const [message,setMessage] = useState([]);
  const [username,setUsername] = useState([]);

  const socketRef = useRef();

  useEffect(() => {
    socketRef.current = io.connect('/');   
    // Sets your ID on connection
    socketRef.current.on("your id",id => {
      setYourID(id)
      console.log(id)
    })
    console.log("socket connection worked")
    socketRef.current.on("message",(message) => {
    recievedMessage(message);
    console.log(message)
    })
    // Gets the messages from the database and sets my messages with them. Peep the concat.
    fetch("http://192.168.0.17:8010/api/messages",{
      method: "GET"
    }).then((res) => {
      return res.json()
    }).then((resJSON) => {     
      console.log(resJSON)
      setMessages(resJSON.concat())
    }).catch((err) => {
      console.log(err)
    });
  },[]);

    function recievedMessage(message) {
      setMessages(oldMsgs => [...oldMsgs,message])
    }
      
    function sendMessage(e) {
      e.preventDefault();
      // Props on this guy match up with the schema.
      const messageObject = {
          body: message,username: username,id: yourID
    };
      setMessage("")
      socketRef.current.emit("send message",messageObject);
      // Sends the message to the database on submit. Uses the messageObject
      fetch("http://192.168.0.17:8010/api/messages",{
          method: "POST",headers: {
              "Content-Type": "application/json"
          },body: JSON.stringify(messageObject)
      }).then((res) => {
          console.log(res)
          return res.json();
      }).catch((err) => {
          console.log(err);
      });
    }

    // function handleChange(e) {
    //   setMessage(e.target.value);
    // }

    // function handleChangeUsername(e) {
    //   setUsername(e.target.value);
    // }

  return (
    //Send down the info,render the chat shit
    <React.Fragment>
      <View style={styles.container}>
        {messages.map((message,index) => {
          if (message.id === yourID) {
            return (
              <ScrollView key={index} contentContainerStyle={styles.myRow}>
                <Text style={styles.myMessage}>
                  {message.body}
                </Text>
              </ScrollView>
            )
          }
          return (
            <ScrollView key={index}>
              <Text style={styles.partnerMessage}>
                {message.username}:   {message.body}
              </Text>
            </ScrollView>
            )
          })}
        </View>

            <View>
                <View style={{ display: 'flex',justifyContent: 'center',marginTop: 30 }}>
                    <TextInput
                    value={message} 
                    onChangeText={message => setMessage(message)} 
                    placeholder="Say something..." />
                    <Button title='snd msg' onPress={sendMessage}/>
                </View>
            </View>

            <View>
              <View>
                <TextInput
                    value={username}
                    onChangeText={username => setUsername(username)}
                    placeholder="Your name..." />
              </View>
            </View>
        </React.Fragment>
    )
}

const styles = StyleSheet.create({
  container: {
    display: 'flex',height: '70%',flexDirection: 'column',width: '100%',marginTop: 100
  },myRow: {
    width: '100%',display: 'flex',justifyContent: 'flex-end',flex: 1
  },myMessage: {
    width: '45%',textAlign: 'center',padding: 10
  },partnerMessage: {
    width: '45%',overflow: 'scroll',flexGrow: 1,justifyContent: 'flex-start',height: '80%'
  }
})

export default ChatRoom;

解决方法

需要进行以下更改：

在 express 服务器代码中，从应用的所有 get 和 post 函数中删除“http://192.168.0.17:8010”。因此，例如：

   app.get("http://192.168.0.17:8010/api/messages",(req,res) => {

应该

    app.get("/api/messages",res) => {

原因：“/api/messages”只是在托管您的 express 应用程序的任何 IP 地址（可能是 192.168.0.17 或任何其他 IP）上公开的端点。

在您的 React 代码中：您可能需要检查您的开发机器上的 IPv4 地址/express 应用程序的托管位置。在 Windows 上，您可以通过在命令行中输入 ipconfig 来执行此操作。

在 React 应用程序中将其添加到您的提取请求中

使用 axios 向服务器请求例如：--

import axios from "axios"

const instance= axios.create({
    baseURL:"http://localhost:9000/",});

export default instance 
axios.post('/api/messages',{
   whatever you want to post in json
}).then.....

如果需要，您也可以使用异步等待

来自 MongoDB 的 React Native fetch 不起作用

如何解决来自 MongoDB 的 React Native fetch 不起作用

解决方法

相关推荐