如何使用React从Mongodb集合中查询单个文档

时间:2018-09-18 11:24:27

标签: node.js mongodb reactjs

我正在尝试构建一个带有react前端和node后端的搜索栏,这将允许我从mongoDB集合中搜索客户ID,然后将单个文档中的所有数据从集合中下拉并显示它在我的应用程序上。

当前,如果可能的话,我只是想让单个文档工作。此刻,它拉低了整个系列。

我当前的节点代码:

搜索路由器

const express = require('express');
const app = express();
const tfiPaintCodesRouter = express.Router();

const PaintInfoSchema = require('../models/PaintInfoSchema.js');

tfiPaintCodesRouter.route('/get').get(function (req, res) {
  const tfipaintcode = new PaintInfoSchema(req.body);
  console.log(req.body)
  tfipaintcode.save()
    .then(tfipaintcode => {
        res.json('Got data!!');
    })
    .catch(err => {
    res.status(400).send("unable to get data");
    console.log('CustomerID is required', err.res);
    });
});

tfiPaintCodesRouter.route('/').get(function (req, res) {
    PaintInfoSchema.find(function (err, tfipaintcodes){
    if(err){
      console.log('this is an error!', err.res);
    }
    else {
      res.json(tfipaintcodes);
    }
  });
});

module.exports = tfiPaintCodesRouter;

使用猫鼬的Mongo模式。

const mongoose = require('mongoose')
var uniqueValidator = require('mongoose-unique-validator');
const Schema = mongoose.Schema;

  // Create schema
 const PaintInfoSchema =  new Schema({
        customerID: {
            required: true,
            index: true,
            unique: true,
            type: String
        },
        companyName: {
            index: true,
            type: String
        },
        curtainCodes: {
            index: true,
            type: String
        },
        sinageCodes: {
            index: true,
            type: String
        },
        Notes: {
            index: true,
            type: String
        },
        Method: {
            index: true,
            type: String
        },
    },{
      collection: 'tfiPaintCodes'
    });
PaintInfoSchema.plugin(uniqueValidator);
module.exports = mongoose.model('PaintInfoSchema', PaintInfoSchema)

我当前的反应代码是:

import React from 'react';
import {  Form, FormGroup, Input, Container, Row, Col } from 'reactstrap';
import './Search.css'
import axios from 'axios'

class Search extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
          searchInfo: []
    };  
  }

  handleInputChange = (event) => {
    event.preventDefault();
    const { value } = event.target;
    console.log('Value', value)
    this.setState({
      query: value
    });

    this.search(value);

  };

  search = query => {
      axios.get('http://localhost:3001/getData')
       .then(res =>{
        const searchInfo = (res.data || []).map(obj => ({ 
          company: obj.companyName,
          sinage: obj.sinageCodes,
          method: obj.Method,
          notes: obj.Notes}));


          this.setState({ searchInfo });
       })
    };

  componentDidMount() {
    this.search("");
  }

    render() {
        return(
            <Container>
                 <Form>
                    <Row>
                        <Col md={{ size: 6 ,offset: 3}}>
                            <FormGroup className="SearchBar">
                              <Input onChange={this.handleInputChange} type="search" name="search" id="exampleSearch" placeholder="search" />
                            </FormGroup>
                        </Col>
                    </Row>

                </Form>
       <ul>
        {this.state.searchInfo.map(function(searchInfo, index){
          return (
              <div key={index}>
                <h1>NAME: {searchInfo.company}</h1>
                <p>{searchInfo.sinage}</p>
                <p>{searchInfo.method}</p>
                <p>{searchInfo.notes}</p>
              </div>
            )
          }
        )}
      </ul>
            </Container>
        );
      }
    }
export default Search

上面的代码查询mongodb,然后提取存储在我的集合中的所有数据,这是返回数据的图像。

前端显示的数据

image

但是我想知道是否有可能仅在该集合中下拉一个文档,因此它将只显示一个Name :,然后显示其他4位数据。

我将数据存储在Mlab中,这是存储在我的收藏集中的文档的屏幕截图。

mongodb中的数据 image

这可能吗?谢谢!

1 个答案:

答案 0 :(得分:1)

最好的方法是仅从数据库中提取一个文档(如果您不需要的话)。

猫鼬和其他任何ORM / ODM一样,为您提供这些选择:

https://mongoosejs.com/docs/api.html#model_Model.findOne

使用FindOne,您可以搜索文档,但只能获取一个(又称“第一个找到的”)文档。 如果您需要固定数量的返回文档,则可以使用limit(10)例如仅返回10个文档。

虽然在我看来,您的代码段未显示在Mongoose中执行查询的确切细分,否则我们可以在您自己的示例中向您显示操作。