反应..const castError=新的castError()..编辑操作将我注销(出现错误时设置的条件)

Question

我的数据库已经连接，我可以进行身份验证和登录，呈现当前存储的列表，当我点击编辑其中一个时，我会得到这个错误：

const castError = new CastError();
[1]                     ^
[1] 
[1] CastError: Cast to ObjectId failed for value ":id" (type string) at path "_id" for model "Coffee"

然后我就被注销了。不会保存任何内容，与数据库的连接也会断开。

这是我的咖啡Routes.ts:

const router = Router();
router.get('/', getAllCoffee);
router.get('/:id', getOneCoffee);
router.post('/', addCoffee);
router.put('/:id', editCoffee);
router.delete('/:id', deleteCoffee);
export default router;

这是咖啡

import { Document, Schema, Model, model } from 'mongoose';
interface ICoffee extends Document {
name: string;
description: string;
price: number;
}
const coffeeSchema: Schema = new Schema({
name: {
type: String,
required: true,
unique: true
},
description: {
type: String,
required: true
},
price: {
type: Number,
required: true
}
});
const Coffee: Model<ICoffee> = model<ICoffee>('Coffee', coffeeSchema);
export { ICoffee, Coffee };

coffee Controller.ts:

export const getAllCoffee: RequestHandler = async (req, res, next) => {
let coffeeList = await Coffee.find();
res.status(200).json(coffeeList);
}
export const getOneCoffee: RequestHandler = async (req, res, next) => {
let itemId = req.params.id;
let coffee = await Coffee.findById(itemId);
res.status(200).json(coffee);
}
export const addCoffee: RequestHandler = async (req, res, next) => {
let user: IUser | null = await verifyUser(req);
if (!user) {
return res.status(403).send();
}
const newCoffee: ICoffee = new Coffee({
name: req.body.name,
description: req.body.description,
price: req.body.price
});
try {
await newCoffee.save();
res.status(201).json(newCoffee);
}
catch (err) {
res.status(500).send(err);
}
}
export const editCoffee: RequestHandler = async (req, res, next) => {
let user: IUser | null = await verifyUser(req);
if (!user) {
return res.status(403).send();
}
let itemId = req.params.id;
const updatedCoffee: ICoffee = new Coffee({
_id: itemId,
name: req.body.name,
description: req.body.description,
price: req.body.price
});
await Coffee.findByIdAndUpdate(itemId, { $set: updatedCoffee })
res.status(200).json(updatedCoffee);
}
export const deleteCoffee: RequestHandler = async (req, res, next) => {
let user: IUser | null = await verifyUser(req);
if (!user) {
return res.status(403).send();
}
let itemId = req.params.id;
let result = await Coffee.findByIdAndDelete(itemId);
res.status(200).json(result);
}

应用程序：

const connectionString: string = 'mongodb://localhost:27017/testDB'
mongoose.connect(connectionString).then(
() => console.log('database connection successful!'), 
err => console.log('Error connecting to the database', err));
const app = express();
app.use(morgan('dev'));
app.use(express.json());
app.use(express.urlencoded({extended: true}));
const cors = require('cors');
const corsOptions = {
origin: [ 'http://localhost:3001' ]
};
app.use(cors(corsOptions));
// routes
app.use('/api/coffee', coffeeRoutes);
app.use('/api/users', userRoutes);
app.use((req: Request, res: Response, next: NextFunction) => {
res.status(404).end();
});
app.listen(3000);

我感谢任何帮助！我已经玩了几个小时了，我是全栈的新手，所以我不明白发生了什么。

这就是我在终端中得到的：

[1] OPTIONS /api/coffee/:id 204 0.696 ms - 0
[1] {
[1]   host: 'localhost:3000',
[1]   connection: 'keep-alive',
[1]   'content-length': '424',
[1]   accept: 'application/json, text/plain, */*',
[1]   authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI2MzE2YzBiNjQyMjYyNDM1YzdiYWZhOTgiLCJpYXQiOjE2NjI1MjE5NjksImV4cCI6MTY2MjUyNTU2OX0.fAusx0ov8IjLA10YXZqL-OljrtShkUjMIA7SveC357k',
[1]   'user-agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36',
[1]   'content-type': 'application/x-www-form-urlencoded',
[1]   'sec-gpc': '1',
[1]   origin: 'http://localhost:3001',
[1]   'sec-fetch-site': 'same-site',
[1]   'sec-fetch-mode': 'cors',
[1]   'sec-fetch-dest': 'empty',
[1]   referer: 'http://localhost:3001/',
[1]   'accept-encoding': 'gzip, deflate, br',
[1]   'accept-language': 'en-US,en;q=0.9'
[1] }
[1] /home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/query.js:4884
[1]   const castError = new CastError();
[1]                     ^
[1] 
[1] CastError: Cast to ObjectId failed for value ":id" (type string) at path "_id" for model "Coffee"
[1]     at model.Query.exec (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/query.js:4884:21)
[1]     at Query.then (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/query.js:4983:15)
[1]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
[1]   messageFormat: undefined,
[1]   stringValue: '":id"',
[1]   kind: 'ObjectId',
[1]   value: ':id',
[1]   path: '_id',
[1]   reason: BSONTypeError: Argument passed in must be a string of 12 bytes or a string of 24 hex characters or an integer
[1]       at new BSONTypeError (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/bson/lib/error.js:41:28)
[1]       at new ObjectId (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/bson/lib/objectid.js:67:23)
[1]       at castObjectId (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/cast/objectid.js:25:12)
[1]       at ObjectId.cast (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/schema/objectid.js:246:12)
[1]       at SchemaType.applySetters (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/schematype.js:1201:12)
[1]       at SchemaType._castForQuery (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/schematype.js:1648:15)
[1]       at SchemaType.castForQuery (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/schematype.js:1636:15)
[1]       at SchemaType.castForQueryWrapper (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/schematype.js:1612:20)
[1]       at cast (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/cast.js:347:32)
[1]       at Query.cast (/home/fgg/Desktop/backend-ts/l13-frontend/coffee-api/node_modules/mongoose/lib/query.js:5312:12),
[1]   valueType: 'string'
[1] }

这是我的编辑Coffee.js:

import React, { useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import axios from 'axios';
export const EditCoffee = () => {
const [coffee, setCoffee] = useState({
name: "",
description: "",
price: ""
});
let params = useParams();
// let { editCoffee } = useContext(CoffeeProvider);
function editCoffee(coffee, id) {
let token = localStorage.getItem('myCoffeeToken')
let headers = {
Authorization: 'Bearer '  + token
};
return axios.put(baseUrl + id, coffee, { headers })
.then(response => {
getAllCoffee();
return new Promise(resolve => resolve(response.data));
}
);
}
function getAllCoffee() {
return axios.get(baseUrl).then(response => setCoffee(response.data))
};
const baseUrl = "http://localhost:3000/api/coffee/";
let navigate = useNavigate();
function handleChange(event) {
setCoffee((prevValue) => {
return { ...prevValue, [event.target.name]: event.target.value }
});
}
function handleSubmit(event) {
event.preventDefault();
editCoffee(editCoffee, params.id).then(() => {
navigate(`/coffee`);
}).catch(error => {
console.log(error);
navigate(`/signin`);
});
}
return (
<form onSubmit={handleSubmit}>
<h1>EDIT COFFEE</h1>
<span>Coffee Name  </span>
<input placeholder="Enter coffee name" type="text" name="name" value={coffee.name} onChange={handleChange} />
<br></br><br></br>
<span>Description  </span>
<input placeholder="Enter description" type="text" name="description" value={coffee.description} onChange={handleChange} />
<br></br><br></br>
<span>Price  </span>
<input placeholder="Enter price" type="number" name="price" value={coffee.price} onChange={handleChange} />
<br></br><br></br>
<button type='submit'>Edit Coffee</button>
</form>
)
};

这是我编辑Coffee:的页面

import React from 'react';
import CoffeeContext from '../contexts/CoffeeContext';
import { Link } from "react-router-dom";

function CoffeeList(props) {
return (
<CoffeeContext.Consumer>
{
({ coffee }) => {
return <div>
<h1>Coffee List</h1>
<Link to="/coffee/new">Add New Coffee</Link>
<div>
{coffee.map((c) => {
return (
<div key={c.id}>
<h2>{c.name} | ${c.price}</h2>
<p>{c.description}</p>
<Link to={`/edit/${c.id}`}>
<button>Edit</button>
</Link>
{/* <a href="/edit/id"><button>Edit</button></a> */}
<button>Delete</button>
</div>
)
})}
</div>
</div>
}
}
</CoffeeContext.Consumer>
);
}

export default CoffeeList;

Answer 1

您的问题就在这里。。。

const updatedCoffee: ICoffee = new Coffee({
_id: itemId,

您正试图从字符串手动设置_id属性(MondoDBObjectId(。这是行不通的。更新现有模型对象时，也没有必要创建新的模型对象。

试试这个

// just a plain object
const updatedCoffee = {
name: req.body.name,
description: req.body.description,
price: req.body.price,
};
res.json(
await Coffee.findByIdAndUpdate(itemId, updatedCoffee, {
returnDocument: "after",
})
);

---

在前端，您需要使用模型_id属性链接到编辑路由。所以不是这个

<a href="/edit/id"><button>Edit</button></a>

您应该使用类似的东西

<div>
{coffee.map((c) => (
<div key={c._id}>
<h2>
{c.name} | ${c.price}
</h2>
<p>{c.description}</p>
<Link to={`/edit/${c._id}`}>
<button>Edit</button>
</Link>
<button>Delete</button>
</div>
))}
</div>;