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

Question

我是MERN堆栈的新手，并且一直在研究一个项目，该项目使用从用户输入的不同驱动程序信息，并将该信息显示回表中的用户。我已经成功连接到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

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

所以我要写

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