react.js无法读取未定义的属性'setState'

Question

Here is my Profile class :

class Profile extends React.Component {
state={email:'',userName:'',userID:''};
getData()
{
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            {
            console.log(this.responseText);
            this.setState({'userID':JSON.parse(this.responseText).userID});
            console.log(this.responseText);
          Profile.this.setState({userID:JSON.parse(this.responseText).userID});
        }
    };
    request.open('GET', 'http://localhost:8080/user/1');
    request.send();
}
componentWillMount() {
    this.getData()
}
render() {
    return(
<div>
     {this.props.userID}
</div>
    );
}
}
 export default Profile;

It gives me error saying Cannot read property 'setState' of undefined .

Error in line :

Profile.this.setState({userID:JSON.parse(this.responseText).userID});

What's wrong here? How this can be resolved ?

Answer 1

You have a number of mistakes here is the correct way of doing this

class Profile extends React.Component {
  constructor(props) {
    super(props);
    // You need to set the initial state inside the constructor
    this.state = { email: "", userName: "", userID: "" };
  }
  getData() {
    // use let instead of var
    let request = new XMLHttpRequest();
    // call request.open outside of the handler
    request.open("GET", "http://localhost:8080/user/1");
    // use an arrow function so that you will have access to the class this context
    request.onreadystatechange = () => {
      // you must directly reference request, not this
      if (request.readyState === 4 && request.status === 200) {
        const { userID } = JSON.parse(request.responseText);
        // destruct instead of typing the entire thing
        // use the shorthand way of creating object with same name properties
        this.setState({ userID });
      }
    };
    // call request.send outside of the handler
    request.send();
  }
  // use componentDidMount , componentWillMount is deprecated
  componentDidMount() {
    this.getData();
  }
  render() {
    // you should get the userID from the this.state not this.props
    return <div>{this.state.userID}</div>;
  }
}

Answer 2

There is no Profile.this , Profile is a class, you'll have to keep a reference to the instance or use an arrow function instead of a normal function, the easiest way here will be to keep a reference to the component, here is an example:

getData()
{
    var that = this;
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
            {
            console.log(this.responseText);
            that.setState({'userID':JSON.parse(this.responseText).userID});
        }
    };
    request.open('GET', 'http://localhost:8080/user/1');
    request.send();
}

Answer 3

try this

you have multiple this contexts that refer to different things.

getData = () => {
    var request = new XMLHttpRequest();

    request.onreadystatechange = function() {
        if (request.readyState === 4 && request.status === 200) {
            {
            console.log(this.responseText);
            this.setState({'userID':JSON.parse(request.responseText).userID});

            console.log(this.responseText);
            this.setState({userID:JSON.parse(request.responseText).userID});
        }
    };
    request.open('GET', 'http://localhost:8080/user/1');
    request.send();
}