javascript - 请求正文与提交的数据不同

Question

我正在开发一个具有表单的 React 应用程序，并将其发送到 Express 路由以将数据发布到 API。 API 文档中的一个示例期望表单数据对象如下所示:

var form_data = {
      "email": "email@example.com",
      "first_name": "John",
      "last_name": "Doe",
      "p[7]": "7",
      "status[7]": "1"
      "p[12]": "12",
      "status[7]": "1"
    };

p[7] 和 p[12] 表示要将用户添加到哪个列表 ID。我很好地从 API 获取了事件列表，并填充了一个供用户选择的选择菜单。当用户提交表单时，我在控制台记录数据，一切都按预期显示:

{email: "testemail@example.com", p[10]: "10", p[9]: "9"}

如您所见，响应具有我从菜单中选择的正确 ID 输出。当我提交表单并将其发送到 Express 路由以将其推送到 API 时，数据突然发生变化。从 Express 服务器上的控制台日志:

{ email: 'testemail@example.com', p: [ '9', '10' ] }

我不确定发送这些数据哪里出了问题。这是我从 React 应用程序发送数据的方法:

sendData(){
    let formData = {
      email: this.state.email_address
    }

    let selectValues = this.state.value.split(',');

    for (var i = 0; i < selectValues.length; i++) {
      formData[`p[${selectValues[i]}]`] = selectValues[i]
    }

    // outputs as expected 
    console.log(formData)

    // Send the form data.
    var xmlhttp = new XMLHttpRequest();
    var _this = this;
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState === 4) {
        var response = JSON.parse(xmlhttp.responseText);
        if (xmlhttp.status === 200 && response.status === 'OK') {
          _this.setState({ type: 'success', message: 'We have received your message and will get in touch shortly. Thanks!' });
        }
        else {
          _this.setState({ type: 'danger', message: 'Sorry, there has been an error. Please try again later or send us an email at info@example.com.' });
        }
      }
    };
    xmlhttp.open('POST', 'http://localhost:5000/send-job-signup', true);
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xmlhttp.send(this.requestBuildQueryString(formData));
  }

我从路由中删除了所有 API 连接，但它非常简单:

.post('/send-job-signup', (req, res) => {

  console.log(req.body);

  res.send(req.body)
} )

任何想法会导致将数据推送到一个 p 键的响应？感谢您的意见!

Answer 1

正如@Peter 在评论中提到的，问题的根源是 body-parser 使用的 qs 库。

防止这种情况的关键是在 urlencoded 中设置 extended: false。所以在我的 Express 应用程序 (See docs on body-parser) 的 index.js 中:

.use(bodyParser.urlencoded({
      extended: false
  }))

这使每个 p 键保持独立，从而允许 API 执行其任务。