如何将 this.props.match.params.id 传递给无服务器函数以从 React Web 应用程序进行数据库查询

Question

我有一个带有 Axios GET 调用的 React 前端。在这个 get 调用中，我试图在最后传入 'this.props.match.params.id'。

有了这个 'this.props.match.params.id'，我正尝试在我的无服务器函数上使用它来查询我的 MongoDB 数据库和 'findById' 函数。

但是，每当我在末尾添加 'this.props.match.params.id' 时（如下所示），该函数都不会触发。如果我删除它，该函数会触发，但 returns undefined.

如果我尝试 'req.params.id'，它 returns 错误 'id not defined'。

供参考 - 当我单击 'edit' link 以拉入 ID 时 URL 成功更新。如果我还控制台 'this.props.match.params.id'，它 returns 我的 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 在 React 代码中得到调用 with this.props.match.params.id:

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 not defined' 的错误消息。如下：

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>

Answer 1

这不是发送 get 请求的最佳方式，当发送 get 请求时，参数应该在 url 中发送，现在您正在将 url 连接到一个变量，因此serveless 函数它没有获取 id，获取以下更改：

axios.get("/api/fetchEditDebt",{ params: { id: this.props.match.params.id } })

这将等同于 /api/fetchEditDebt?id=sent_id

所以 serveless 函数现在得到 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

如何将 this.props.match.params.id 传递给无服务器函数以从 React Web 应用程序进行数据库查询

How to pass this.props.match.params.id across to serverless function for database query from React web app

mongoose

reactjs

serverless

vercel