Question

获取状态400错误的先前问题已解决，我能够将响应作为JSON对象检索，我在这里附有修改后的代码，接收到的JSON响应存储在JSON对象中： response_jsonObj，输出格式如下 0：{id：“值od id”，名称：“名称的值”，field1：“ field1的值”，field2：“ field2的值”，...} 0：{id：“值od id”，名称：“名称的值”，field1：“ field1的值”，field2：“ field2的值”，...}，依此类推，我需要在表格格式，我按照堆栈溢出的示例进行操作，无法复制它，欢迎任何输入。

import React, { Component } from 'react';
import './App.css';
class App extends Component {


  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = { responsedata:[{"id":"","name":"","field1":"","field2":""}] }
    }

  handleSubmit(event) {
    event.preventDefault();
    const form = event.target;
    const data = new FormData(form);
    const arrayValue = [];
    var i = 0;
    console.log('Data from Form:',data);
    for (let name of data.keys()) {
      const input = form.elements[name];
      const parserName = input.dataset.parse;
      const parsedValue = data.get(name);
      console.log('name',name);
      console.log('parsedValue',parsedValue);
      data.set(name, parsedValue);
      arrayValue[i] = parsedValue;
      i=i+1;

    }


console.log('id:after get',arrayValue[0]);
console.log('field1:after get',arrayValue[2]);
console.log('field7:after get',arrayValue[8]);


var response_data = "";
var response_jsonObj ;
var txt = "";
 var req = {"CustomerLookupRequest" : [{
 "id":arrayValue[0],
 "name": "",
 "field1":arrayValue[2],
 "field2":"",
 "field3":"",
 "field4":"",
 "field5":"",
 "field6":"",
 "field7":arrayValue[8],
 "field8":"",
 "field9":"",
 "fied10":"",
 "field11":""
  }]
 };

console.log('req string :' + req);

    fetch('API_URL', {
      headers: {

        'Accept': 'application/json, text/plain, application/xml,  */*',
        'Content-Type': 'application/json' ,
        'Access-Control-Allow-Headers': 'Content-Type',
      },
      method: 'POST',
      body: JSON.stringify(req)}
      ).then(function(response) {
        if (response.status !== 200) {
          console.log('Problem in fetching');
          return;
        }
        response.text().then(function(data) {
          console.log('Data in Console',data);
          response_data = data;
          console.log('Response Data',response_data);
          response_jsonObj = JSON.parse(response_data);
          console.log('Response JSON Object',response_jsonObj);
        });
      }).catch(error => this.setState({ error }));

      }

  render() {
    return (
      <div id = "id1">
      <form onSubmit={this.handleSubmit}>

            <label htmlFor="id">Enter id</label>
            <input id="id" name="id" type="text" />

            <label htmlFor="name">Enter Name</label>
            <input id="name" name="name" type="text" />

            <label htmlFor="Field1">Enter your Field1</label>
            <input id="Field1" name="Field1" type="text" />

            <label htmlFor="Field2">Enter your Field2</label>
            <input id="Field2" name="Field2" type="text" />

            <label htmlFor="Field3">Enter your Field3</label>
            <input id="Field3" name="Field3" type="text" />

            <label htmlFor="Field4">Enter your Field4</label>
            <input id="Field4" name="Field4" type="text" />

            <label htmlFor="Field5">Enter your Field5</label>
            <input id="Field5" name="Field5" type="text" />

            <label htmlFor="Field6">Enter your Field6</label>
            <input id="Field6" name="Field6" type="text" />

            <label htmlFor="Field7">Enter your Field7</label>
            <input id="Field7" name="Field7" type="text" />

            <label htmlFor="Field8">Enter your Field8</label>
            <input id="Field8" name="Field8" type="text" />

            <label htmlFor="Field9">Enter your Field9</label>
            <input id="Field9" name="Field9" type="text" />

            <label htmlFor="Field10">Enter your Field10</label>
            <input id="Field10" name="Field10" type="text" />

            <label htmlFor="Field11">Enter your Field11</label>
            <input id="Field11" name="Field11" type="text" />

        <button>Send data!</button>
      </form>

      </div>

    );
  }
}

export default App;

Answer 1

我不确定您的提取格式是否正确。这样吧。

fetch(POSTAPIURL, {
   method: 'post',
   headers: {
     'Accept': 'application/json',
     'Content-Type': 'application/json'
   },
   body: JSON.stringify({
      String1:"xyzabc",
      String2:"ABCD"
    })
}).then(function(response) {
   return response.json();
}).then(function(data) {
   console.log(data);
}).catch( err =>  {
   console.log(err);
});

我无法呈现正在显示为响应的JSON对象

1 个答案: