Hey guys trying react out and having an issue when using setState, I keep getting Cannot read property setState of undefined error and I'm not sure how to fix it. I've tried using bind in the constructor but that still doesn't fix the issue.

Thanks for your input.

import React from 'react';

class Products extends React.Component {
 constructor(props) {
 super(props)
 this.state = {products:{}}
 this.getItems = this.getItems.bind(this)
}

ponentDidMount() {
  this.getItems('').then(function(response){
  console.log(response);
  this.setState({products:response});
},function(error){
  console.log('failed',error);
});
}
ponentWillMount() {

}

getItems(url){

return new Promise(function (resolve,reject) {
  var req = new XMLHttpRequest();
  req.open('GET',url);
  req.setRequestHeader('Authorization','Token Token');


  req.onload = function(){
    if(req.status == 200){
      resolve(req.response);
    }else{
      reject(Error(req.statusText));
    }
  };

  req.onerror = function(){
    reject(Error("Error"));
  };

  req.send();

});

}

render() {
return (
 <div>
  hi
 </div>
);
 }
}
export default Products;

Hey guys trying react out and having an issue when using setState, I keep getting Cannot read property setState of undefined error and I'm not sure how to fix it. I've tried using bind in the constructor but that still doesn't fix the issue.

Thanks for your input.

import React from 'react';

class Products extends React.Component {
 constructor(props) {
 super(props)
 this.state = {products:{}}
 this.getItems = this.getItems.bind(this)
}

ponentDidMount() {
  this.getItems('http://lcboapi./products/300681').then(function(response){
  console.log(response);
  this.setState({products:response});
},function(error){
  console.log('failed',error);
});
}
ponentWillMount() {

}

getItems(url){

return new Promise(function (resolve,reject) {
  var req = new XMLHttpRequest();
  req.open('GET',url);
  req.setRequestHeader('Authorization','Token Token');


  req.onload = function(){
    if(req.status == 200){
      resolve(req.response);
    }else{
      reject(Error(req.statusText));
    }
  };

  req.onerror = function(){
    reject(Error("Error"));
  };

  req.send();

});

}

render() {
return (
 <div>
  hi
 </div>
);
 }
}
export default Products;

• javascript
• reactjs
• this

1 Answer 1

In order to make this refer to the ponent you can .bind(this) the function

function(response) {
  console.log(response);
  this.setState({products:response});
}.bind(this)

If you can use ES6 then you can also use an arrow function where this is automatically bound:

(response) => {
  console.log(response);
  this.setState({products:response});
}