在promise中獲取構造函數變量

Question

我無法在使用javascript的fetch調用中獲取構造函數變量並作出反應。我想在.then（函數（json）回調中this.state.numXLabels的值，但我得到TypeError：無法讀取未定義（...）的屬性'狀態'。這是做什麼的正確方法？相關代碼：

類型錯誤：無法讀取的未定義的屬性「狀態」（...）

import React, { Component } from 'react' 
class StockGraph extends Component { 

constructor(props) { 
    super(props); 
    this.state = { numXLabels: 0 } 
    var url = 'https://www.quandl.com/api/v3/datasets/WIKI/MSFT'+ 
      '.json?api_key=bCRpjzvgPNkxLzqAv2yY'; 
    fetch(url) 
    .then(function(response) { 
     return response.json() 
    }) 
    .then(function(json) { 
     console.log(this.state.numXLabels); 
     //this.setState({ 
     // numXLabels: 30 
     //}) 
    }) 
    } 
... 

Answer 1

不要試圖在你的陣營組成部分的構造使用狀態或使AJAX調用相反，端起在lifecycle methods之內呼叫立即觸發，如componentWillMount。同樣要訪問您的ajax回調中的this.state，您需要綁定this到該函數。使用fat arrow function syntax是最直接的方法。

class StockGraph extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { numXLabels: 0 } 
    } 

    componentWillMount() { 
     var url = 'https://www.quandl.com/api/v3/datasets/WIKI/MSFT'+ 
      '.json?api_key=bCRpjzvgPNkxLzqAv2yY'; 
     fetch(url) 
     .then((response) => { 
      return response.json() 
     }) 
     .then((json) => { 
      console.log(this.state.numXLabels); 
      //this.setState({ 
      // numXLabels: 30 
      //}) 
     }) 
    } 
    ...