React.js：爲什麼狀態是未定義的？

Question

我需要在每次迭代腳本時寫入狀態信息。如何正確地做到這一點？

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

現在在控制檯：

aaa

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

如何修正這個錯誤？

full code

Answer 1

this被覆蓋在回調。你應該把它的值寫入另一個變量，像這樣：

var that = this; 

然後用that從那時起：

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

Answer 2

你必須使用箭頭符號() => {}定義時回撥功能：

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