送信されたデータと異なるボディをリクエストする

Question

私はフォームを持つReactアプリケーションに取り組んでおり、Expressルートに送信して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ドキュメントからの例は次のように見て、フォームデータオブジェクトを期待しています。私は、APIからのアクティブなリストをうまく取得し、ユーザーが選択するための選択メニューを入力しています。ユーザーがフォームを送信すると、私はデータをログコンソール、そしてそれがすべてではそれが必要として表示されます：あなたは、応答は、私は、メニューから選択正しいIDの出力を持って見ることができるように

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

。フォームを送信してExpressルートに送ってAPIにプッシュすると、データが突然変更されます。 Expressサーバーのコンソールログから：

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

このデータを送信するとどこが間違っているのか分かりません。ここでリアクトアプリからデータを送信するために、私の方法は次のとおりです。

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) 
}) 

任意のアイデアを応答を引き起こすだろうかデータを1つのpキーにプッシュするには？あなたのご意見ありがとうございます！

Answer 1

@Peterがコメントで述べたように、問題の根はbody-parserによって使用されるqsライブラリでした。

これを防止するための鍵は、extended: falseをurlencodedに設定していました。だから私のエクスプレスアプリ（See docs on body-parser）のindex.jsに：

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

これは、APIは、そのことを行うことができpキー独立したそれぞれを保ちました。