フェッチを使用してJSONデータを投稿する

Question

フォーム入力から複数のデータポイントの投稿をしようとしています。

しかし、フォームデータはjson出力ペイロードに達しません（ネットワーク出力を確認しました）。それは決して誘発されないようです。

私はCodepen-にそれをすべて入れているhttp://codepen.io/yarnball/pen/LRVgpo?editors=1011

データはこの正確な方法で掲示する必要が

私はそれを開いていますthis-を再書き込みするためのより良い方法がある場合：

{ 
     "title": "SAMPLE", 
     "tag": [ 
      { 
       "name": "Movie", 
       "taglevel": 1, 
      } 
     ], 
     "info": [] 
    } 

Postメソッド

var Postapi = React.createClass({ 
componentWillMount() { 
var form = document.querySelector('form') 
return fetch('http://localhost:8000/api/Data/', { 
method: 'POST', 
body: JSON.stringify({ 
    title: this.state.itemtitle, 
    tag:[ 
     {name:this.state.tagtitle, 
     taglevel:this.state.taglevel} 
     ], 
    info:[] 
    }) 
}) 

}、

サンプルリターン

<form onSubmit={this.handleSubmit}> 
... 
    <input 
    placeholder="Item Title" 
    type="text" 
    itemtitle={this.state.itemtitle} 
    onChange={this.handleChange} 
    /> 

初期状態&は

getInitialState: function() { 
    return { 
    itemtitle: [], 
    tagtitle: [], 
    taglevel: [], 
    tagoptions: Exampledata 
    }; 
    }, 

    handleChange: function(event) { 
    this.setState({itemtitle: event.target.itemtitle}); 
    this.setState({tagtitle: event.target.tagtitle}); 
    this.setState({tagname: event.target.tagname}); 
    }, 
    handleSubmit: function(e) { 
    e.preventDefault(); 
    var itemtitle = this.state.itemtitle 
    var tagtitle = this.state.tagtitle 
    var taglevel = this.state.taglevel 
    this.setState({itemtitle: '', text: ''}); 
    }, 

Answer 1

を提出し、あなたはhandlesubmit機能であなたのfetch関数を呼び出す必要があります...このlink、componentWillMount : is executed before rendering, on both server and client side.によるので、フォームは空です。 あなたは反応のライフサイクルについて詳しく読む必要があります。