react.js無法讀取未定義的屬性'setState'

Question

這是我的Profile課：

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;

它給我一個錯誤，提示無法讀取undefined的屬性“ setState” 。

發生錯誤：

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

怎么了 如何解決？

Answer 1

您有很多錯誤，這是正確的做法

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

沒有Profile.this ， Profile是一個類，您必須保留對實例的引用或使用箭頭函數而不是常規函數，這里最簡單的方法是保留對組件的引用，這是一個例子：

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

嘗試這個

您有多個引用不同事物的上下文。

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();
}