title: Cannot call setState in callback
body: <p>I am new to React, so I know I might not be doing everything right.</p>
  
  <p>I am trying to call setStatus inside of a callback for onreadystatechange but getting an error in the browser.  The code does an AJAX call to the server to see if a proposed username is already in the database.  Upon return the onreadystatechange is executed.  There I am trying to set the new error message for the username if it already exists.</p>
  
  <p>Here is my state data:</p>
  
  <pre><code>const initialState = {
    firstname: "",
    lastname: "",
    username: "",
    password: "",
    email: "",
    firstnameError: "",
    lastnameError: "",
    usernameError: "",
    passwordError: "",
    emailError: ""
  };
  
  class SignUpForm extends Component {
    constructor() {
      super();
  
      this.state = initialState;
  
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.checkUserName = this.checkUserName.bind(this);
      this.checkEmail = this.checkEmail.bind(this);
      this.validateForm = this.validateForm.bind(this);
    }
  </code></pre>
  
  <p>This is where I update state in a change handler for fields in the form:</p>
  
  <pre><code>handleChange(e) {
      let target = e.target;
      let value = target.value;
      let name = target.name;
  
      if (name === "username") {
        value = value.toUpperCase();
      }
  
      this.setState({
        [name]: value
      });
    }
  </code></pre>
  
  <p>This is the routine where I am getting an error in the browser.  The lines where the error occurs is marked with a comment on the line below.</p>
  
  <pre><code>checkUserName() {
      let usernameError = "";
      let element = "";
      let checkNameResponse = "";
      let checkNameMessage = "";
      let request = "";
  
      let url = "";
      let userName = "";
      let requestData = "";
      let checkNameResponseJSON = "";
  
      request = new XMLHttpRequest();
      if (request == null) alert("Unable to create checkDBForUSerNameRequest");
      else {
        url = "/php/CheckUsername.php";
        userName = escape(document.getElementById("username").value);
        requestData = JSON.stringify({
          username: userName
        });
  
        request.onreadystatechange = function() {
          if (request.readyState === 4 &amp;&amp; request.status === 200) {
            checkNameResponseJSON = JSON.parse(request.responseText);
            checkNameResponse = checkNameResponseJSON.returncode;
            checkNameMessage = checkNameResponseJSON.message;
  
            element = document.getElementById("SignupIcon");
            element.className = "displayIcon";
  
            if (checkNameResponse === 0) {
              element = document.getElementById("SignupIconFile");
              element.src = "/images/YesButton.png";
              element.alt = "Available";
              this.setState({ usernameError: "" });
            } else {
              element = document.getElementById("SignupIconFile");
              element.src = "/images/NoButton.png";
              element.alt = "Not Available";
              usernameError = checkNameMessage;
              this.setState({ usernameError: usernameError });  // BROWSER ERROR
            }
          }
        };
  
        request.open("POST", url, true);
        request.setRequestHeader("Content-Type", "application/json");
        request.send(requestData);
      }
    }
  </code></pre>
  
  <p>This is the text from the browser error:</p>
  
  <pre><code>0: Object doesn't support property or method 'setState'
  </code></pre>
  
  <p>Any ideas why this happens or how to fix?</p>