如何解决如何将this.props.match.params.id传递给无服务器功能,以便从React Web应用程序进行数据库查询
我有一个React前端,有一个Axios GET调用。在此get调用中,我尝试最后传递“ this.props.match.params.id”。
使用此“ this.props.match.params.id”,我试图在无服务器功能上使用它来通过“ findById”功能查询我的MongoDB数据库。
但是,每当我在末尾添加“ this.props.match.params.id”(如下所示)时,该函数均不会触发。如果删除它,该函数会触发,但返回未定义。
如果我改用“ req.params.id”,则会返回“未定义ID”错误。
作为参考-单击“编辑”链接以获取ID时,URL成功更新。如果我还控制台“ this.props.match.params.id”,它将在Axios调用中返回正确的ID
如何将'this.props.match.params.id'传递给我的无服务器功能,并通过'findById'使用它查询数据库?
这是我的代码:
我的无服务器功能
module.exports = async (req,res) => {
console.log(req.params);
let fetchEditDebts = await SubmitDebt.findById(req.params);
return res.status(200).json(fetchEditDebts);
};
我的Axios通过 this.props.match.params.id来调用React代码:
componentDidMount() {
axios.get("/api/fetchEditDebt",{ params: { id: this.props.match.params.id } })
.then((response) => {
console.log(response)
})
.catch((error) => {
if (error.response) {
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
console.log(error.request);
} else {
console.log('Error',error.message);
}
console.log(error.config);
})
}
我的Axios呼叫没有 this.props.match.params.id:
componentDidMount() {
axios.get("/api/fetchEditDebt")
.then((response) => {
console.log(response)
})
.catch((error) => {
if (error.response) {
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
console.log(error.request);
} else {
console.log('Error',error.message);
}
console.log(error.config);
})
}
任何提示/技巧将不胜感激。如果需要更多详细信息,请告诉我。
编辑:我尝试了以下答案(并编辑了我的代码以反映出来。。但现在收到“未定义ID”的错误消息。如下:
2020-10-23T15:51:44.222Z 39718d37-7a13-4240-a01c-90030916edf8 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/fetchEditDebt.js:12:28)"," 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
我在React Router上的路线
import EditDebt from './components/edit-debt/edit-debt';
function App() {
return (
<Switch>
<Route path="/edit/:id" component={EditDebt} />
</Switch>
解决方法
这不是发送get请求的最佳方法,当发送get请求时,应在url中发送参数,现在您将url压缩为变量,因此无服务的函数不会获取id,获取在下面更改:
axios.get("/api/fetchEditDebt",{ params: { id: this.props.match.params.id } })
这等同于/ api / fetchEditDebt?id = sent_id
因此,无服务功能现在获取params.id:
module.exports = async (req,res) => {
console.log(req.params.id);
let fetchEditDebts = await SubmitDebt.findById(req.params.id);
return res.status(200).json(fetchEditDebts);
};
Best regards
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。