Setting State Issue

Question

I seem to be struggling with what should be a simple issue regarding setting State. I'm learning React so I did this across several steps. Initially I setup my components so they are setting fields using props (e.g. this.propsoverview[0].ProfileImg) which was handed down State from Overview Pane, which was initially set using a this.SetState call in componentWillMount where data was pulled from a static file.

Next I worked on adding a function to pull the data in a more dynamic way (i.e. getPatient function). I'm calling this function from the componentWillMount and I am able to do a console.log to output the JSON as a string (using JSON.stringify). So I know the JSON is being returned.

Where I'm struggling is setting the State in componnetWillMount using the returned JSON from my getPatient call. I get the error Uncaught (in prmise) Type Error: Cannot read property 'setState' of undefined on the 4th line of my code (i.e. this.setState...)

Below is my code...

componentWillMount() {
     getPatient().then(function(result) {
     //console.log(JSON.stringify(result));
     this.setState({PATIENT: result})
})


function getPatient() {
     const urlGetPatient = 'url_that_gets_patient_here';
     return fetch(urlGetPatient).then(function(response) {
       return response.json();
     }).then(function(json) {
       return json;
     }); 
 }

 render() {
     return (
       <App>
        …
       <OverviewPane overview={this.state.PATIENT} />
        …
       </App>
      }

class OverviewPane extends React.Component { 
     constructor(props) {
        super(props);
        autoBind(this);
     }

     render () {
        return (
         <table>
           <tbody>
             <tr>
              <td><Image src={this.props.overview[0].ProfileImg}/></td>
             </tr>
           </tbody>
          </table>
          );
        }
    }

Any help would really be appreciated.

Possible duplicate of [Uncaught TypeError: Cannot read property 'setState' of undefined](https://stackoverflow.com/questions/32317154/uncaught-typeerror-cannot-read-property-setstate-of-undefined). Check the 2nd answer there. — Chris, Jul 12 '17 at 11:59

score 1 · Accepted Answer · answered Jul 12 '17 at 11:58

You're getting cannot call setState of undefined because you're using a regular function as a callback instead of an arrow function (() => {}). When using a regular function, the this parameter (context) is set to the calling function, and not what you might think (the so-called lexical this).

Change your .then callback to an arrow function, and you should be good:

componentWillMount() {
  getPatient().then((result) => {
    this.setState({PATIENT: result});
  })
}

Gerard Banasig · Answer 2 · 2017-07-12T12:12:32.067

0

The this in your code is bound within the promise, you need to bind this in order to get reacts this scope.

getPatient().then(function(result) {
    //console.log(JSON.stringify(result));
    this.setState({PATIENT: result})
}.bind(this))

edited Jul 12 '17 at 12:12

answered Jul 12 '17 at 11:58

Gerard Banasig

1,703
13
20

Setting State Issue

2 Answers2