【问题标题】:How do you fetch a single item from mongodb and display it? (MERN)您如何从 mongodb 获取单个项目并显示它? (默恩)
【发布时间】:2021-07-08 02:44:03
【问题描述】:

如何只从 mongodb 获取模块 1 并将其显示到 react 上?

const userSchema = new mongoose.Schema({
  username: String,
  password: String,
  module1: Number,
  module2: Number,
  module3: Number,
  module4: Number,
  module5: Number,
  module6: Number,
  module7: Number,
  module8: Number,
  module9: Number,
  module10: Number,
});
const User = mongoose.model("User", userSchema);

我已经看到了许多从 mongodb 获取项目数组并使用 .map 函数显示它的方法,但我只想将上面用户架构中的单个项目(模块 1)显示到我的 react 应用程序。

【问题讨论】:

标签: node.js reactjs mongodb mongoose mern


【解决方案1】:

很久以前我就遇到过这个问题。希望这对你也有帮助!

  1. 首先,在您的 router.js 或 server.js 后端服务器/路由文件中,使用 Model.findOne()/ Mondel.findById()/ Model.find() 获取 MongoDB 中的数据。
  2. 现在我们在某个地方有了数据,假设我们将其存储在一个变量中,data
  3. 差不多了,我们现在必须让module1 密钥通过。你现在应该有 data = 类似这样的东西:
var data = 
[{
     username: String,
  password: String,
  module1: Number,
  module2: Number,
  module3: Number,
  module4: Number,
  module5: Number,
  module6: Number,
  module7: Number,
  module8: Number,
  module9: Number,
  module10: Number,
}]

很简单,把它从数组中取出对象,做var module 1 = data[0].module1.Voila!在这里!

  1. module1 发送到 React。由于我对react不太熟悉,请查看thisthis

【讨论】:

    【解决方案2】:

    您可以通过以下方式从数据库中获取module1

    向前端发送数据的API:

    const app = express(),
      User = require('./models/User');
    
    app.get('/api/user/:id', async (req, res) => {
      const { id } = req.params;
      const user = await User.findById(id);
    
      res.json({
        success: true,
        user,
      });
    });
    

    从 API 检索数据:

    export default function StackOverflow() {
      import React, { useEffect } from 'react';
      import axios from 'axios';
    
      const getResponse = async () => {
        const res = await axios.get(`http://localhost:3000/api/user/${userId}`);
    
        console.log(res.data.user.module1);
      };
    
      useEffect(() => {
        getResponse();
      }, []);
    
      return <div></div>;
    }
    

    或者通过这种方式:

    向前端发送数据的API:

    const app = express(),
      User = require('./models/User');
    
    app.get('/api/user/:id', async (req, res) => {
      const { id } = req.params;
      const { module1 } = await User.findById(id).select('-_id module1');
    
      res.json({
        success: true,
        module1,
      });
    });
    

    从 API 检索数据:

    export default function StackOverflow() {
      import React, { useEffect } from 'react';
      import axios from 'axios';
    
      const getResponse = async () => {
        const res = await axios.get(`http://localhost:3000/api/user/${userId}`);
    
        console.log(res.data.module1);
      };
    
      useEffect(() => {
        getResponse();
      }, []);
    
      return <div></div>;
    }
    

    【讨论】:

      猜你喜欢
      • 2017-07-15
      • 1970-01-01
      • 1970-01-01
      • 2017-12-31
      • 2014-05-18
      • 2021-05-28
      • 2020-06-28
      • 1970-01-01
      • 2021-05-07
      相关资源
      最近更新 更多