如何在我的反应应用程序中从 mongodb 数据库中获取对象的 ID？答案

【问题标题】：How do I get the ID of an object from mongodb database in my react application?如何在我的反应应用程序中从 mongodb 数据库中获取对象的 ID？
【发布时间】：2021-10-27 16:28:12
【问题描述】：

我在构建中学习。我正在使用 Reactjs、Nodejs、Mongodb 构建一个博客管理系统。我想在数据库中存储一些前端值，以便我授予管理员权限的任何人都可以发布、编辑和删除这些值。这些值是网站名称、子名称、侧边栏简介、标题图像和简介图像。

这是创建值的代码：

//create new frontend paramters into database
router.post("/", async (req, res) =>{
const newFrontendValues = new Frontend(req.body);//we called the    frontend model we created and we used req.body

try{
    const savedFrontendValues = await newFrontendValues.save()//we tried to save the frontend values created
  
    
    res.status(200).json(savedFrontendValues)
}catch(err){
   res.status(500).json(err)
}

});

我在节点中编写了代码，以便在创建它们后获取如下值：

//get frontend parameters
router.get("/:id", async (req, res) =>{
try{
    const frontend = await Frontend.findById(req.params.id)
    res.status(200).json(frontend)
}catch(err){
    res.status(500).json(err)
}
})

我的服务器 api 代码

app.use("/api/frontend", frontend)

在反应中，我想调用值的 _id 但我迷路了。我真的不知道该怎么做。它在邮递员中可以正常工作，因为我可以直接实现值_id。见附图

但在 React 中，我希望它是动态的。

这是我的 React 代码：

 useEffect(() => {
  const fetchFrontendValue = async () =>{
      const res = await axios.get("/frontend")
      console.log(res.data)
  }
 fetchFrontendValue()
 }, [])

如何将 _id 添加到此

axios.get("/frontend")

【问题讨论】：

当您调用 fetchFrontendValue 时，是否有包含您要获取数据的 id 的路由参数？您如何在前端跟踪哪个 id 是该页面/视图的正确 id？
需要注意的一点：前端永远不应该知道使用了mongodb。它应该只关心对后端进行 HTTP 调用。这些调用的实现方式与 React 代码无关。后端仅负责访问数据库并在响应中创建 JSON 字符串。这种职责分离有助于我们人类更清楚地思考每个系统。话虽如此，这里的解决方案是确保在来自 nodejs 后端的响应中包含 id。
为此，Frontend.findById() 返回什么？ findById() 是什么？这是你写的函数吗？如果是这样，请edit您的问题包括它和任何其他相关代码。
我更新了代码以显示创建前端值的代码。你问的是这个吗？

标签： node.js reactjs mongodb axios

【解决方案1】：

您需要查看获取请求参数。通常作为惯例，人们在 URL 中传递它们。所以它类似于http://localhost:5000/api/frontend?id=617944dc7e00022337a483be78，在API 方面，您可以使用req.body.id 将其传递给数据库。还有其他方法可以做到这一点，但这是最常见的，因为一些旧浏览器会丢弃附加到 GET 请求的参数。这是一个链接：https://www.w3schools.com/tags/ref_httpmethods.asp

【讨论】：

如果id变了怎么办？例如，管理员决定删除该值
您应该首先加载所有 ID 并将它们传递给前端。当用户请求一个特定的 ID 时，你会像我的回答一样处理它。这有意义吗？

【解决方案2】：

您应该考虑寻求完整的解决方案。在基本层面上，您应该遵循这些步骤

实现一个后端路由/getall，以这种方式获取数据库中的所有项目

await Frontend.find({})
在前端呈现获取的列表，使每个项目都是一个 React UI 项目，并且作为每个项目的一部分，您有用于删除和更新项目数据的按钮

{backendData?.map((item, index)=><SingleItem key={item?._id} data={item} />)}
由于每个 SingleItem 都有更新和删除按钮以及 mongodb ID 作为数据的一部分，因此单击更新和删除按钮时，您将从数据中获取 id 并在后端调用相关的 DB Url

【讨论】：