React.js: Why the state is undefined?

Question

I need to write to state information at each iteration of the script. How to do it correctly?

    getPageLink(i) {
        if(i > 0){
            console.log(this.state.res) // aaa
            new Promise((resolve, reject) => {
                request(this.props.catalogLinks[i], function (error, response, html) {
                    if (!error && response.statusCode == 200) {
                        var $ = cheerio.load(html);
                        $('.post__title_link').each(function (i, element) {
                            console.log(this.state.res) // undefined
                        });
                        resolve("result");
                    } else {
                        console.log('sss', this.state.res) // undefined
                        reject("result");
                    }
                });
            }).then(
                result => {
                    this.getPageLink(--i)
                },
                error => {
                    this.getPageLink(--i)
                }
            );
        }
    }

Now in the console:

aaa

bundle.js:53444 Uncaught TypeError: Cannot read property 'res' of undefined

How to fix the error?

full code

score 0 · Answer 1 · answered Oct 04 '17 at 14:45

this is being overwritten in the callback. You should put its value into another variable like so:

var that = this;

And then use that from then on:

    getPageLink(i) {
        if(i > 0){
            console.log(this.state.res) 
            var that = this;
            new Promise((resolve, reject) => {
                request(this.props.catalogLinks[i], function (error, response, html) {
                    if (!error && response.statusCode == 200) {
                        var $ = cheerio.load(html);
                        $('.post__title_link').each(function (i, element) {
                            console.log(that.state.res)
                        });
                        resolve("result");
                    } else {
                        console.log('sss', that.state.res)
                        reject("result");
                    }
                });
            }).then(
                result => {
                    this.getPageLink(--i)
                },
                error => {
                    this.getPageLink(--i)
                }
            );
        }
    }

This is a bad pattern. The correct way of handling nested scope is with fat arrow functions. — Chase DeAnda, Oct 04 '17 at 14:48

score 0 · Answer 2 · answered Oct 04 '17 at 14:46

You have to use the arrow notation () => {} when defining the callback function:

request(this.props.catalogLinks[i], (error, response, html) => {
       if (!error && response.statusCode == 200) {
          var $ = cheerio.load(html);
          $('.post__title_link').each((i, element) => {
              console.log(this.state.res) // will be defined
          });
          resolve("result");
       } else {
          console.log('sss', this.state.res) // will be defined
          reject("result");
       }
});

React.js: Why the state is undefined?

2 Answers2