如何使用模拟器连接到本地主机 Mongodb？

Question

第一次在这里提问，有什么不清楚的地方请见谅。

基本上，我参加了一个反应课程，该课程使用 crud 设置了一个功能性网站，现在我正在尝试在 react native 中设置类似的东西。所以我是 react、react-native 和 mongodb 的新手；基本上我正在使用的所有东西。这也是为了自学，所以只是想扩展我的技能。

这是在后端 server.js 下的 react 应用程序中工作的代码

const client = await MongoClient.connect("mongodb://localhost:27017", {
      useUnifiedTopology: true,
    });
//api inbetween these two
app.listen(8000, () => console.log("Listening on port 8000"));

在我的 package.json 前端我有这个

"proxy": "http://localhost:8000/",

据我了解，这基本上让我的前端“代理”/屏蔽自己，就好像它来自端口 8000。然后我可以使用如下所示的 url 调用它。

useEffect(() => {
    const fetchData = async () => {
      const result = await fetch(`/api/articles/${name}`);
      const body = await result.json();
      setArticleInfo(body);
    };
    fetchData();
  }, [name]);

在我的 react-native 应用程序中，我收到一个未处理的承诺拒绝，而在邮递员中，我收到一个内部 500 错误，没有相关错误似乎为空，因为没有打印任何内容。做一些研究，我认为问题是因为现在我在模拟器上运行这个应用程序所以我认为它无法识别主计算机或本地主机？

我尝试将地址的 localhost 部分更改为我的 ipv4 地址、expo 连接 url 0.0.0.0，以及我认为是 android localhost 10.0.2.2 但它们似乎都不起作用。 android localhost 更改示例。

server.js

const client = await MongoClient.connect("mongodb://10.0.2.2:27017", {
      useUnifiedTopology: true,
    });
//api inbetween these two
app.listen(8000, () => console.log("Listening on port 8000"));

package.json

"proxy": "http://10.0.2.2:8000/",

当它设置为 10.0.2.2 时邮递员超时并且应用仍然有未处理的承诺错误。

当它设置为 0.0.0.0 时，邮递员返回一个没有详细信息的 500 错误，并且应用程序仍然有未处理的承诺错误。

当它设置为 expo url 时，它直接不起作用。

当它设置为我的 ipv4 地址时，我得到未处理的承诺，邮递员返回此错误

"error": {
        "name": "MongoServerSelectionError",
        "reason": {
            "type": "Single",
            "setName": null,
            "maxSetVersion": null,
            "maxElectionId": null,
            "servers": {},
            "stale": false,
            "compatible": true,
            "compatibilityError": null,
            "logicalSessionTimeoutMinutes": null,
            "heartbeatFrequencyMS": 10000,
            "localThresholdMS": 15,
            "commonWireVersion": null
        }
    }

我看过的帖子

Connect to MongoDB Atlas Cluster db with react-native app

Mongodb connection with react native form

React Native / Expo : Fetch throws “Network request failed”

why do we use 10.0.2.2 to connect to local web server instead of using computer ip address in android client

Answer 1

你的 useEffect 写错了

这样写

useEffect(() => {
  GetArticles(); // Called whenever there's a change in name
}, [name]);

// Create this function outside useEffect
const GetArticles = async () => {
  try {
    // Also in your fetch you have yo write url like this
    const result = await fetch(
      `http://${YOUR_IPv4_ADDRESS}:8000/api/articles/${name}`
    );
    const body = await result.json();
    setArticleInfo(body);
  } catch (error) {
    console.log(error);
  }
};

这也是 100% 正确的

const client = await MongoClient.connect("mongodb://localhost:27017", {
      useUnifiedTopology: true,
    });
//api inbetween these two
app.listen(8000, () => console.log("Listening on port 8000"));

不要改成这样

const client = await MongoClient.connect("mongodb://10.0.2.2:27017", {
      useUnifiedTopology: true,
    });
//api inbetween these two
app.listen(8000, () => console.log("Listening on port 8000"));