未定義不是.map中的對象

Question

我正在研究一個反應應用程序，並嘗試遍歷數據塊。該塊有我想要做一些計算一個unixtime，但是當我在對象上調用的功能我得到的錯誤

 _getTime(time) { 
    if (time === 0) { 
     return '1'; 
    } else if (time === 2) { 
     return '2'; 
    } else { 
     return 'stuff'; 
    } 
    }, 

    render: function() { 
    return (
     <div className="container-fluid"> 
     <div className="row"> 
      <div className="col-md-12 text-center"> 
       {this.state.daily.map(function(day) { 
       return (
        <div key={day.time} className="key col-md-12"> 
        <div className="col-md-3">{this._getTime(day.time)}</div> 
         <div className="col-md-3">{day.icon}</div> 
         <div className="col-md-3">{day.apparentTemperatureMax}/{day.apparentTemperatureMin}</div> 
        </div> 
       ); 
       })} 
      </div> 
     </div> 
     </div> 
    ); 
    }, 

問題是這條線<div className="col-md-3">{this._getTime(day.time)}</div>，當我把它的地圖功能外它所有的作品。

任何幫助將不勝感激

Answer 1

這是因爲this在函數調用時確定的，而不是在功能寫入時間。您的匿名函數在爲您迭代集合時由.map()調用，但沒有this。

有幾種方法可以解決這個問題，因爲您明顯在使用babel，我可以假設您使用的是ES6，在這種情況下，將匿名函數更改爲箭頭函數表達式，將會實現這個功能：

this.state.daily.map(day => { 
    // ... 
}); 

或者，看看.bind()，以及作爲第二個參數，以.map()。

Answer 2

這是一個函數上下文，而不是組件。用自變量賦值。

render: function() { 
var self = this; 

return (
    <div className="container-fluid"> 
    <div className="row"> 
     <div className="col-md-12 text-center"> 
      {self.state.daily.map(function(day) { 
      return (
       <div key={day.time} className="key col-md-12"> 
       <div className="col-md-3">{self._getTime(day.time)}</div> 
        <div className="col-md-3">{day.icon}</div> 
        <div className="col-md-3">{day.apparentTemperatureMax}/{day.apparentTemperatureMin}</div> 
       </div> 
      ); 
      })} 
     </div> 
    </div> 
    </div> 
); 
}