我是 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
uj5u.com熱心網友回復：
在您的后端，您的路由器功能似乎沒有使用
res.send
你在做 res.json 的地方，你可以做類似的事情
res.status(200).send(responseData)
所以在router.routes.findById' then 回呼中，而不是：
.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
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/462333.html