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

Question

这是我的 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;

它给我错误提示无法读取未定义的属性'setState'。

行错误：

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

这是怎么回事？如何解决这个问题？

Answer 1

没有Profile.this，Profile是class，你必须保留对实例的引用或使用箭头函数而不是普通函数，这里最简单的方法是保留对组件的引用，这是一个示例：

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 2

试试这个

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

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

Answer 3

你这里有很多错误是正确的做法

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

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

react.js Cannot read property 'setState' of undefined

javascript

json

xmlhttprequest

setstate

reactjs

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

react.js Cannot read property 'setState' of undefined

javascript

json

xmlhttprequest

setstate

reactjs

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