未定义不是.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> 
); 
}