req.params 没有在 Axios post 请求上从 React 前端传递到无服务器函数

Question

我有一个链接到无服务器函数的编辑表单，其中 post 请求是基于 Mongoose 'findById'.

页面加载时查询ID成功，页面填充数据库查询详情

但是，当提交 post 请求时，用于查找数据库条目的 req.query 未定义。

奇怪的是，this.props.match.params.id returns 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 is not defined'。这是代码和错误消息：

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

Answer 1

在你的 React 组件上，你将 Id 作为 req.params 提供，而在你的无服务器函数上，你正试图从 req.query 中读取你可以尝试从参数中读取 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.");
    }
// ...
});

Answer 2

axios.post方法是axios.post(url[, data[, config]])。所以你应该在第三个参数中发送 params 对象。

await axios.post("/api/editDebtCard",
  {
    balance: this.state.balance
  },
  {
    params: {
      id: this.props.match.params.id
    }
  }
)

req.params 没有在 Axios post 请求上从 React 前端传递到无服务器函数

req.params not passing from React frontend to serverless function on Axios post request

reactjs

serverless

vercel