使用fetch发布JSON数据

Question

我正在尝试从表单输入中发布多个数据点。

但是，表单数据没有达到json输出有效负载（我检查了网络输出）。它似乎永远不会被触发。

如果有更好的方法来重写这个 - 我愿意接受它

我把它全部放入Codepen- http://codepen.io/yarnball/pen/LRVgpo?editors=1011

数据需要以这种方式发布：

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

发布方法

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

初始状态＆amp;提交

  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

您必须在fetch函数中调用handlesubmit函数...根据此link，componentWillMount : is executed before rendering, on both server and client side.，您的表单为空。 你需要阅读更多关于反应生命周期的内容。