javascript - Axios POST 的发送状态和数据未显示在 req.body 中

Question

我正在使用 React，并想使用 Axios 发出 POST 请求。我正在尝试将表单数据发送到我的 Node 后端。

我正在尝试在 POST 请求中发送一个对象，该对象是保存所有用户对表单的输入的状态。

react

  const [formDetails, setFormDetails] = useState({})
  const handleFormChange = (evt) => setFormDetails({ ...formDetails, [evt.target.name]: evt.target.value })
  const sendInvoice = async (formDetails) => {
    const response = await axios.post('/api/new_invoice', formDetails)
    console.log(response)
}

Node 路由

module.exports = (app) => {
// Create a new invoice
app.post('/api/new_invoice', async (req, res) => {

    console.log('making a new invoice...')

    try {

        console.log(req.body)
        res.send(req.body)


    } catch (err) {
        console.log(err)
        res.status(400)
        res.send({ error: err })
        return
    }


})
}

这是我得到的回复:

当我查看响应的 req.body 时，它是一个空对象，尽管我可以在发送表单时看到该状态。

我还尝试对一个对象进行硬编码，这将在 req.body 上显示数据。

例如，如果我将请求更改为

const response = await axios.post('/api/new_invoice', {formData: 'this is form data'})

然后我可以在 req.body 中看到 formData: 'this is form data'

Answer 1

您需要在 sendInvoice 函数中对 formData 进行字符串化，

您还可以分享来自 postman 的示例请求正文吗？您已经在那里测试了 API

let body= JSON.stringify(formData)

const config = {
      headers: {
        'Content-Type': 'application/JSON'
      }
    };
const res = await axios.post('/api/v1/new_invoice', body, config);