Javascript react.js无法读取属性'；设置状态'；未定义的

这是我的

档案

课程：

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;

类配置文件扩展了React.Component{
状态={email:''，用户名：''，用户ID:''}；
getData（）
{
var request=new XMLHttpRequest（）；
request.onreadystatechange=函数（）{
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（）；
}
组件willmount（）{
这个文件名为getData（）
}
render（）{
返回(
{this.props.userID}
);
}
}
导出默认配置文件；

它给我一个错误，告诉我无法读取未定义的的属性“setState”

行中的错误：

Profile.this.setState（{userID:JSON.parse（this.responseText.userID}）；

---

这里出了什么问题？如何解决这个问题？

没有

配置文件。这个
，
配置文件是一个类，您必须保留对实例的引用或使用箭头函数而不是普通函数，这里最简单的方法是保留对组件的引用，下面是一个示例：

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


试试这个

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

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

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

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.Component{
建造师（道具）{
超级（道具）；
//您需要在构造函数中设置初始状态
this.state={email:，userName:，userID:}；
}
getData（）{
//使用let代替var
let request=new XMLHttpRequest（）；
//在处理程序外部调用request.open
请求。打开（“获取”http://localhost:8080/user/1");
//使用arrow函数，以便可以访问此上下文中的类
request.onreadystatechange=（）=>{
//您必须直接引用请求，而不是此请求
if（request.readyState==4&&request.status==200）{
const{userID}=JSON.parse（request.responseText）；
//销毁而不是键入整个内容
//使用简写方法创建具有相同名称属性的对象
this.setState（{userID}）；
}
};
//在处理程序外部调用request.send
request.send（）；
}
//使用componentDidMount，不推荐使用componentWillMount
componentDidMount（）{
这是getData（）；
}
render（）{
//您应该从this.state而不是this.props获取用户ID
返回{this.state.userID}；
}
}
Profile.this未定义。使用this.setState而不是Profile.this.setStatethis.setState会出现相同的错误。如果要查看更改，则可能会出现@MaifeeUlAsad的重复项：
that.setState（{'userID'：JSON.parse（this.responseText.userID}，（）=>console.log（that.state.userID））
@MaifeeUlAsad
userID
被添加到
此中。状态
不是直接添加到
此
中。而且，
setState
不会立即更改状态（它是异步的），您必须等待或调用
setState
，并将函数作为第二个参数（在设置状态后运行的回调）@MaifeeUlAsad是的，在您调用
setState
之后，应该调用组件的
render
函数。@MaifeeUlAsad您使用了
this.props.userID
而不是
render
函数中的
this.state.userID
。有关最佳实践，请查看我的答案@MaifeeUlAsad>“您需要在构造函数内设置初始状态”您不需要，这两种方法都是创建类属性的有效方法。“使用let而不是var”
let
或
var
在这里不会更改任何内容。尽管您应该使用
const
来避免意外地重新分配
请求
。