Undefined不是.map中的对象

Undefined is not an object in .map

本文关键字：对象 map 不是 Undefined      更新时间：2023-09-26

我正在开发一个react应用程序，我尝试迭代一个数据块。块有一个unix时间，我想在它上面做一些计算，但是当我在对象上调用函数时，我得到了错误

      _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>，当我把它放在地图函数之外时，它都工作了。

如有任何帮助，不胜感激

这是因为this是在函数调用时确定的，而不是在函数写入时确定的。您的匿名函数，由.map()在为您迭代集合时调用，没有this。

有几种方法可以解决这个问题，因为你显然在使用babel，我可以假设你在使用ES6，在这种情况下，把你的匿名函数变成一个箭头函数表达式，就可以了: 
this.state.daily.map(day => {
  // ...
});

或者，看看.bind()，以及.map()的第二个参数。

这是一个函数上下文，而不是组件。赋值给self变量

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>
);
 }
相关文章：