如何从 mongoDB ATLAS 获取数据并显示在 React App 中

Question

我是 MERN 堆栈的新手，一直在从事一个项目，该项目使用从用户输入的不同驱动程序信息，并在 table 中将该信息显示给用户。我已成功连接到 MongoDB Atlas，也可以使用我的前端输入数据，但我似乎无法弄清楚如何将数据检索回前端。你们能帮我取回数据以及如何以表格格式呈现数据吗？提前致谢。

//driver model
onst mongoose = require('mongoose');
const DriverSchema = new mongoose.Schema({
    name:{type: String, required:true},
    email:{type: String, required:true},
    phone:{type: Number, required:true},
    address:{type:String, required:true},
    country:{type: String, required:true}
});

const DriverModel = mongoose.model("drivers", DriverSchema)
module.exports = DriverModel;

//routes
const router= require('express').Router();
let Driver = require('../models/driver');

router.route('/getDrivers').get((req, res) =>{
    Driver.find()
    .then(drivers => res.json(drivers))
    .catch(err => res.status(400).json('Error: '+ err));

}
)

router.route('/createDrivers').post((req, res) => {
    const name = req.body.name;
    const email = req.body.email;
    const phone = req.body.phone;
    const address = req.body.address;
    const country =req.body.country;
    const newDriver = new Driver({name, email, phone, address, country});
  
    newDriver.save()
      .then(() => res.json('Driver added!'))
      .catch(err => res.status(400).json('Error: ' + err));
  });
  
  router.route('/:id').get((req,res)=> {
      Driver.findById(req.params.id)
      .then(drivers => res.json(drivers))
      .catch(err => res.status(400).json('Error: ' + err));
  })

  router.route('/:id').delete((req, res) => {
    Driver.findByIdAndDelete(req.params.id)
      .then(() => res.json('Driver deleted.'))
      .catch(err => res.status(400).json('Error: ' + err));
  });

  router.route('/update/:id').post((req, res) => {
    Driver.findById(req.params.id)
      .then(driver => {
        driver.name = req.body.name;
        driver.email = req.body.email;
        driver.phone = req.body.phone;
        driver.address = req.body.address;
        driver.country =req.body.country;
  
        driver.save()
          .then(() => res.json('Driver updated!'))
          .catch(err => res.status(400).json('Error: ' + err));
      })
      .catch(err => res.status(400).json('Error: ' + err));
  });

  module.exports = router;

//frontend
import React from 'react';
import Sidebar from '../../components/sidebar/Sidebar';
import Navbar from '../../components/navbar/Navbar';
import { useEffect, useState } from 'react';
import "./dbtrial.scss" ;
import Axios from "axios";
function Dbtrial() {
    
    const [listOfDrivers, setListOfDrivers]= useState([]);
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [phone, setPhone] = useState(0);
    const [address, setAddress] = useState("");
    const [country, setCountry] = useState("");

    useEffect(() => {
      const fetchDrivers= async () =>{
        try{
          const response = await fetch("http://localhost:3001/driver/getDrivers")
          if(!response.ok) throw Error('Did not recieve expected data');
          const listDrivers = await response.json();
          console.log(listDrivers);
          setListOfDrivers(listDrivers);
          setFetchError(null);
        } catch(err){
          setFetchError(err.message)
        }
      }
      setTimeout(() => {
        (async () => await fetchDrivers())();
      }, 2000)
      //(async () => await fetchDrivers())();
    }, [])
        
    const createDrivers = () =>{
      Axios.post("http://localhost:3001/createDrivers", {
        name, 
        email, 
        phone, 
        address,
        country,
      }).then((response) =>{
        setListOfDrivers([...listOfDrivers,
        {
          name, email, phone, address,
          country,
        },
      ]);
        //alert("Driver added!");
      });
    } 
    
    return (
        <div className="db">
            <Sidebar />
            <div className="dbq">
                <Navbar />
                <div className="formInput">
                    <label>Name</label>
                    <input type="text" placeholder="name"  onChange={(event) => {
                      setName(event.target.value);
                      }} />
                </div>
                <div className="formInput">
                    <label>Email</label>
                    <input type="email" placeholder="email"  onChange={(event)=> {setEmail(event.target.value);}}/>
                </div>
                <div className="formInput">
                    <label>Phonenumber</label>
                    <input type="text" placeholder="0923668881 "  onChange={(event) => {setPhone(event.target.value);}}/>
                    </div>
                <div className="formInput">
                    <label>Address</label>
                    <input type="text" placeholder="Addis Ababa" onChange={(event)=> {setAddress(event.target.value);}}/>
                </div>
                <div className="formInput">
                    <label>Country</label>
                    <input type="text" placeholder="country" onChange={(event) => {setCountry(event.target.value);}}/>
                    <button type="submit" onClick={createDrivers}>Send</button>
                </div>
                
            </div>
            
        </div>
    )
}

export default Dbtrial

Answer 1

在您的后端，您的路由器功能似乎没有使用

res.send

你在做什么res.json，你可以做类似

的事情

res.status(200).send(responseData)

所以在 router.routes.findById' 然后回调，而不是：

.then(drivers => 
   res.json(drivers))

你可以

.then(drivers => 
   res.status(200).send(JSON.stringify(drivers)) //maybe you don't need to use JSON.stringify here

在您的前端，我不确定在您的 api 调用后将定义什么 response.data。要确定响应具有哪些属性，您可以 console.dir(response.data)、console.dir(response.json()) 并在浏览器控制台中检查结果。（不太熟悉 axios）如果结果是您的驱动程序数组，您可以像已经在使用 setDriverList 那样设置状态，但可能使用 [=16 的结果或部分结果=] 或 response.data.devices 或类似的东西。

所以我会做类似的事情

//...api call
.then((response) => {
    if(response.status === 200){
        setDriverList(response.data.drivers) //or response.data or whatever
    }
})

如何从 mongoDB ATLAS 获取数据并显示在 React App 中

How to GET data from mongoDB ATLAS and display in React App

mongodb

node.js

express

reactjs