無法從公共API獲取響應（在React.js中）

Question

我是React.js的新手，我一直在研究一個簡單的表格。 我使用ajax發送表單數據但我無法得到響應。 當我運行它時，它給了我readystate不是4 ，在控制台上，我已經把它放在那里進行調試。 我不知道我哪里錯了。 這是我的代碼：

import React from 'react'
import ReactDOM from 'react-dom'
import { Field, Form, actions } from 'react-redux-form'
import classes from './SignUp.scss'


export class SignUp extends React.Component {

    constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(user) {

    const { dispatch } = this.props;

    const somePromise = new Promise((resolve) => {

         console.log(user);            
         this.setState({}, this.sendFormData);

    });

    dispatch(actions.submit('user', somePromise));    

  }    

  sendFormData(){


    var formData = {
      fn: ReactDOM.findDOMNode(this.refs.fn).value,
      ln: ReactDOM.findDOMNode(this.refs.ln).value,
      city: ReactDOM.findDOMNode(this.refs.city).value,
      //rlc: ReactDOM.findDOMNode(this.refs.rlc).value
    };

    //for check boxes
    formData.yes = this.getSelected('yes');
    formData.no = this.getSelected('no');

    // Send the form data.
    var xmlhttp = new XMLHttpRequest();
    var _this = this;
    xmlhttp.open('POST','http://jsonplaceholder.typicode.com/users',true);
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4) {

        var response = JSON.parse(xmlhttp.responseText);
        if (xmlhttp.status == 200 && response.status == 'OK') {
          console.log('success');              
        }

        else{
          console.log('failure')              
        }

        console.log('readystate is 4')
      }
      else {console.log('readystate is not 4')}
    };


    xmlhttp.send(this.requestBuildQueryString(formData));
  }


  requestBuildQueryString(params){

    var queryString = [];
    for(var property in params)
      if (params.hasOwnProperty(property)) {
        queryString.push(encodeURIComponent(property) + '=' + encodeURIComponent(params[property]));
      }

    return queryString.join('&');

  }

  getSelected(fieldName) {
    var i;
    var fields = document.getElementsByName(fieldName);
    var selectedFields = [];
    for (i = 0; i < fields.length; i++) {
      if (fields[i].checked === true) {
        selectedFields.push(fields[i].value);
      }
    }
    return selectedFields.join(', ');

  }

  render() {


    let { user } = this.props;

    return (

      <Form model="user" onSubmit = {this.handleSubmit}>

        <div>
          <Field model="user.fname">
          <label>First Name: </label>
          <input type="text" placeholder= "First Name" ref="fn"/>
          </Field>
        </div>


        <div>
          <Field model="user.lname">
          <label>Last Name: </label>
          <input type="text" placeholder="Last Name" ref="ln"/>
          </Field>
        </div>

        <div>
          <Field model="user.live">
          <label>Where do you live? </label>
          <input type="text" placeholder="Your City" ref="city"/>
          </Field>
        </div>

        <div>
          <Field model="user.relocate" ref="rlc">
          <label>Are you willing to relocate?</label>
          <label>
          <input type="radio" value="Yes" ref="yes" checked={user.relocate.value === 'Yes'}/> Yes
          </label>

          <label>
          <input type="radio" value="No" ref="no" checked={user.relocate.value === 'No'}/> No
          </label>
          </Field>
        </div>

        <div>
          <button type="submit">
          Lets go, {user.fname} {user.lname}!
          </button>
        </div>
      </Form>
  )
  }
}

SignUp.propTypes = {
    dispatch: React.PropTypes.func.isRequired,
    user: React.PropTypes.shape({
    fname: React.PropTypes.string.isRequired,
    lname: React.PropTypes.string.isRequired,
    live: React.PropTypes.string.isRequired,
    relocate: React.PropTypes.string.isRequired,

  }).isRequired,
};

export default SignUp;

這是我的控制台上的輸出：

安慰

Answer 1

您必須按正確的順序執行此操作：

1. 構造
2. 打開
3. 設置處理程序
4. 發送

你在打開前設置處理程序

也，

“ 注意：onreadystatechange事件被觸發五次（0-4），對於readyState中的每次更改都會觸發一次。 ”

因此，如果你在'readystate is 4'之前看到'readystate is not 4'幾次，那就沒關系了

編輯：嘗試使用if（xmlhttp.status == 201）替換if（xmlhttp.status == 200 && response.status =='OK'）。 您的主機返回狀態碼201