javascript - 无法从公共(public) API 获取响应(在 React.js 中)

Question

我是 React.js 的新手，我一直在研究一个简单的表单。我使用 ajax 发送表单数据，但无法得到响应。当我运行它时，它在控制台上显示 readystate is not 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;

这是我的控制台上的输出:

console

Answer 1

您必须按照正确的顺序进行操作:

1. 构建
2. 打开
3. 设置处理程序
4. 发送

您正在打开之前设置处理程序

另外，

"Note: The onreadystatechange event is triggered five times (0-4), one time for each change in readyState. "

因此，如果您在最终看到“readystate is 4”之前多次看到“readystate is not 4”，那没关系

编辑:尝试将 if (xmlhttp.status == 200 && response.status == 'OK') 替换为 if (xmlhttp.status == 201)。您的主机返回状态代码 201