javascript - 使用 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}
  />

初始状态并提交

  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 :在服务器端和客户端渲染之前执行。 因此您的表单为空。 您需要阅读有关 React 生命周期的更多信息。