如何更新MERN堆栈中的数据
我正在尝试在MERN堆栈中创建库存更新路线。我的“添加新项”路由运行正常，但由于拒绝更新“更新路由”，有人可以告诉我我做错了吗
//Model
const mongoose= require('mongoose');
const Schema = mongoose.Schema;
//create Schema
const ItemSchema = new Schema({
name : String,
description : String,
price : Number,
quantity : Number,
supplier : String,
taxable : Boolean,
});
module.exports=Inventory=mongoose.model('item',ItemSchema,'inventory');
Routes.js
router.post('/update', (req, res) => {
// inserting a new inventory
var _id = req.body._id;
var inventory = {
name:req.body.name,
description:req.body.description,
price:req.body.price,
quantity:req.body.quantity,
supplier:req.body.supplier,
taxable:req.body.taxable,
};
Inventory.findByIdAndUpdate(_id, { $set: inventory }, { new: true }, function (err, inventory) {
if (err) {
res.status(500);
res.send(err);
} else {
res.status(200);
res.send();
}
});
});
UpdateForm.js
class InventoryUpdateForm extends Component {
constructor(props){
super(props);
this.state = {
_id: this.props.match.params._id,
name: "",
description: "",
price: "",
quantity: "",
supplier: "",
taxable: "",
loading: true,
date: moment(new Date()).format("YYYY-MM-DD"),
};
//some code, basically binding change function with "this"
.........................
//Firstly, I get the entire data for the particular id here
componentWillMount(){
axios.get("/api/inventory/"+this.state._id)
.then(
(res) => {
var newState = {
name: res.data.name,
description: res.data.department,
price: res.data.price,
quantity:res.data.quantity,
supplier:res.data.supplier,
taxable:res.data.taxable,
};
this.setState( newState );
this.setState( { loading: false } );
},
(err) => {
alert('An error occured! Try refreshing the page.', err);
}
);
}
我在这里处理变更事件案例
handleDatePickerChange(date){
this.setState({ date: moment(date).format("YYYY-MM-DD") });
}
handleNameChange(event){
this.setState({ name: event.target.value });
}
handleDescriptionChange(event){
this.setState({ description: event.target.value });
}
handlePriceChange(event){
this.setState({ price: event.target.value });
handleQuantityChange(event){
this.setState({ quantity: event.target.value });
}
handleSupplierChange(event){
this.setState({ supplier: event.target.value });
}
handleTaxableChange(event){
this.setState({ taxable: event.target.value });
}
我终于提交了
submitForm(){
const { _id, name, description, price, quantity,supplier,taxable} = this.state;
var inventory = {
_id, name, description, price, quantity,supplier,taxable
};
axios.post('/update', inventory)
.then(
(res) => {
alert('Updated successfully!');
},
(err) => {
alert('An error occurred! Try submitting the form again.', err);
}
);
}
检索，渲染并实际更新数据，但是当我尝试保存数据时，出现错误消息返回
An error occurred! Try submitting the form again
我该如何解决？
回答如下：在axios中，为了捕获错误，我们添加了一个catch块。
您的submitForm必须是这样，您可以尝试注释发生的事情吗？
submitForm() {
const { _id, name, description, price, quantity,supplier,taxable} = this.state;
var inventory = {
_id, name, description, price, quantity,supplier,taxable
};
axios.post('/update', inventory)
.then( res => {
alert('Updated successfully!');
}
)
.catch(err => {
console.log(err.response);
alert('An error occurred! Try submitting the form again.');
});
}
如何更新MERN堆栈中的数据
我正在尝试在MERN堆栈中创建库存更新路线。我的“添加新项”路由运行正常，但由于拒绝更新“更新路由”，有人可以告诉我我做错了吗
//Model
const mongoose= require('mongoose');
const Schema = mongoose.Schema;
//create Schema
const ItemSchema = new Schema({
name : String,
description : String,
price : Number,
quantity : Number,
supplier : String,
taxable : Boolean,
});
module.exports=Inventory=mongoose.model('item',ItemSchema,'inventory');
Routes.js
router.post('/update', (req, res) => {
// inserting a new inventory
var _id = req.body._id;
var inventory = {
name:req.body.name,
description:req.body.description,
price:req.body.price,
quantity:req.body.quantity,
supplier:req.body.supplier,
taxable:req.body.taxable,
};
Inventory.findByIdAndUpdate(_id, { $set: inventory }, { new: true }, function (err, inventory) {
if (err) {
res.status(500);
res.send(err);
} else {
res.status(200);
res.send();
}
});
});
UpdateForm.js
class InventoryUpdateForm extends Component {
constructor(props){
super(props);
this.state = {
_id: this.props.match.params._id,
name: "",
description: "",
price: "",
quantity: "",
supplier: "",
taxable: "",
loading: true,
date: moment(new Date()).format("YYYY-MM-DD"),
};
//some code, basically binding change function with "this"
.........................
//Firstly, I get the entire data for the particular id here
componentWillMount(){
axios.get("/api/inventory/"+this.state._id)
.then(
(res) => {
var newState = {
name: res.data.name,
description: res.data.department,
price: res.data.price,
quantity:res.data.quantity,
supplier:res.data.supplier,
taxable:res.data.taxable,
};
this.setState( newState );
this.setState( { loading: false } );
},
(err) => {
alert('An error occured! Try refreshing the page.', err);
}
);
}
我在这里处理变更事件案例
handleDatePickerChange(date){
this.setState({ date: moment(date).format("YYYY-MM-DD") });
}
handleNameChange(event){
this.setState({ name: event.target.value });
}
handleDescriptionChange(event){
this.setState({ description: event.target.value });
}
handlePriceChange(event){
this.setState({ price: event.target.value });
handleQuantityChange(event){
this.setState({ quantity: event.target.value });
}
handleSupplierChange(event){
this.setState({ supplier: event.target.value });
}
handleTaxableChange(event){
this.setState({ taxable: event.target.value });
}
我终于提交了
submitForm(){
const { _id, name, description, price, quantity,supplier,taxable} = this.state;
var inventory = {
_id, name, description, price, quantity,supplier,taxable
};
axios.post('/update', inventory)
.then(
(res) => {
alert('Updated successfully!');
},
(err) => {
alert('An error occurred! Try submitting the form again.', err);
}
);
}
检索，渲染并实际更新数据，但是当我尝试保存数据时，出现错误消息返回
An error occurred! Try submitting the form again
我该如何解决？
回答如下：在axios中，为了捕获错误，我们添加了一个catch块。
您的submitForm必须是这样，您可以尝试注释发生的事情吗？
submitForm() {
const { _id, name, description, price, quantity,supplier,taxable} = this.state;
var inventory = {
_id, name, description, price, quantity,supplier,taxable
};
axios.post('/update', inventory)
.then( res => {
alert('Updated successfully!');
}
)
.catch(err => {
console.log(err.response);
alert('An error occurred! Try submitting the form again.');
});
}