我有一个编辑表单，它链接到一个无服务器函数，在该函数中，基于Mongoose的"findById"发出post请求。
加载页面时会成功查询ID，并在页面上填充数据库查询的详细信息。
然而，当提交post请求时，用于查找数据库条目的req.query就没有定义了。
奇怪的是，this.props.match.params.id在客户端成功地返回了id，但它没有传递到无服务器函数。
有人能发现我哪里错了吗？
这是我的代码：
无服务器功能-
module.exports = async (req, res) => {
await SubmitDebt.findById(req.query.id, function(err, submitdebt) {
if (!submitdebt) {
console.log(req.query.id);
res.status(404).send("Unable to find entry to edit.");
}
else {
console.log(req.query.id);
submitdebt.creditCard = req.body.creditCard;
submitdebt.personalLoan = req.body.personalLoan;
submitdebt.provider = req.body.provider;
submitdebt.balance = req.body.balance;
submitdebt.limit = req.body.limit;
submitdebt.monthly = req.body.monthly;
submitdebt.interest = req.body.interest;
submitdebt.borrowed = req.body.borrowed;
submitdebt.save().then(submitdebt => {
res.json("Debt successfully updated.");
})
.catch(err => {
res.status(400).send("Debt unsuccessfully updated.");
});
}
});
};
我的编辑组件：
class EditDebt extends Component {
constructor(props) {
super(props)
this.state = {
balance: ''
}
this.onChange = this.onChange.bind(this);
}
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value})
}
onSubmit = async (e) => {
e.preventDefault();
console.log(this.props.match.params.id)
await axios.post("/api/editDebtCard", { params: { id: this.props.match.params.id } }, {
balance: this.state.balance
})
this.props.history.push('/dashboard');
}
render() {
return (
<section className="edit-debt-section">
<div className="edit-debt-container">
<form className="edit-debt-form" method="POST" onSubmit={this.onSubmit}>
<div className="edit-debt-form-container">
<label className="edit-debt-label">What's the balance?</label>
<div className="edit-debt-input-container">
<h6 className="edit-debt-input-text">£</h6>
<input className="edit-debt-number-input" type="number" name="balance" value={this.state.balance} onChange={this.onChange} step="0.01" />
</div>
<button className="edit-debt-update-button" type="submit" name="button">Create</button>
</div>
</form>
</div>
</section>
)
}
}
export default EditDebt
我已经从我的组件中删除了其他函数和输入，以使它更可读。
任何帮助都将不胜感激！
编辑：我也试过用"req.params.id"而不是"req.query.id"，但不幸的是，它说"id没有定义"。这是代码和错误消息：
module.exports = async (req, res) => {
await SubmitDebt.findById(req.params.id, function(err, submitdebt) {
if (!submitdebt) {
console.log(req.params.id);
res.status(404).send("Unable to find entry to edit.");
}
else {
console.log(req.params.id);
submitdebt.balance = req.body.balance;
submitdebt.save().then(submitdebt => {
res.json("Debt successfully updated.");
})
.catch(err => {
res.status(400).send("Debt unsuccessfully updated.");
});
}
});
};
错误信息：
2020-10-24T12:05:51.806Z 279ac48e-af0b-49d1-bd13-4056f765ec40 ERROR Unhandled Promise Rejection {"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"TypeError: Cannot read property 'id' of undefined","reason":{"errorType":"TypeError","errorMessage":"Cannot read property 'id' of undefined","stack":["TypeError: Cannot read property 'id' of undefined"," at module.exports (/var/task/api/editDebtCard.js:22:40)"," at Server.<anonymous> (/var/task/___now_helpers.js:813:19)"," at Server.emit (events.js:315:20)"," at parserOnIncoming (_http_server.js:790:12)"," at HTTPParser.parserOnHeadersComplete (_http_common.js:119:17)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: TypeError: Cannot read property 'id' of undefined"," at process.<anonymous> (/var/runtime/index.js:35:15)"," at process.emit (events.js:327:22)"," at processPromiseRejections (internal/process/promises.js:209:33)"," at processTicksAndRejections (internal/process/task_queues.js:98:32)"]}
Unknown application error occurred
axios.post方法为axios.post(url[, data[, config]])。因此，您应该在第三个参数中发送params对象。
await axios.post("/api/editDebtCard",
{
balance: this.state.balance
},
{
params: {
id: this.props.match.params.id
}
}
)
在react组件上，您将Id作为req.params给出，而在无服务器函数上，您正试图从req.query读取Id。您能尝试从参数中读取Id吗？
await SubmitDebt.findById(req.params.id, function(err, submitdebt) {
if (!submitdebt) {
console.log(req.params.id);
res.status(404).send("Unable to find entry to edit.");
}
// ...
});