"questo" non è definito all'interno della funzione della mappa Reactjs

Question

Sto lavorando con Reactjs, scrivendo un componente di menu.

"use strict"; 

var React = require("react"); 
var Menus = React.createClass({ 

    item_url: function (item,categories,articles) { 
     console.log('afdasfasfasdfasdf'); 
     var url='XXX'; 
     if (item.type == 1) { 
      url = item.categoryId == null ? 'javascript:void(0)' : path('buex_portal_browse_category', {slug: categories[item.categoryId].slug}); 
     } else if (item.type == 2) { 
      url = item.articleId == null ? 'javascript:void(0)' : path('buex_portal_view_article', {slug: articles[item.articleId].slug, id: item.articleId}); 
     } else { 
      url = item.url; 
     } 
     return url; 
    }, 

    render: function() { 
    // console.log(this.props.menus); // return correctly 
      var menuElements = this.props.menus.map(function (item1) { // return fault : 'cannot read property 'props' of undefined ' 
      return (
       <div> 
        <li> 
         <a href={this.item_url(item1, this.props.categories, this.props.articles)}>{item1.name} // the same fault above 
          <i class="glyphicon glyphicon-chevron-right pull-right"></i> 
         </a> 
         <div class="sub-menu"> 
          <div> 
          {item1._children.map(function (item2) { 
           return (
            <div> 
             <h4> 
              <a href={this.item_url(item2, this.props.categories, this.props.articles)}>{ item2.name }</a> 
             </h4> 
             <ul> 
              {item2._children.map(function (item3) { 
               return ( 
                <div><li><a href={this.item_url(item3, this.props.categories, this.props.articles) }>{ item3.name }</a></li></div> 
               ); 
              })}     
             </ul> 
            </div> 
           ); 
          })} 
          </div> 
         </div> 
        </li> 
       </div> 
      ); 
     }); 

     return (
      <div class="menu"> 
       <ul class="nav nav-tabs nav-stacked"> 
        {menuElements} 
       </ul> 
      </div> 
     ); 
    } 
}); 

Ogni volta che uso 'questo' dentro funzione di mappa non è definito, ma al di fuori non è un problema.

L'errore:

"Cannot read property 'props' of undefined"

Qualcuno mi aiuti! : ((

Answer 1

Array.prototype.map() prende un secondo argomento per impostare ciò this riferisce alla funzione di mappatura, quindi passare this come secondo argomento di preservare contesto attuale:

someList.map(function(item) { 
    ... 
}, this) 

In alternativa, è possibile utilizzare un ES6 arrow function per preservare automaticamente la corrente this contesto:

someList.map((item) => { 
    ... 
})