"này" là không xác định bên trong chức năng bản đồ Reactjs

Question

Tôi đang làm việc với Reactjs, viết một thành phần 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> 
     ); 
    } 
}); 

Bất cứ khi nào tôi sử dụng chức năng 'này' bên trong bản đồ thì không xác định, nhưng bên ngoài không có vấn đề gì.

Lỗi:

"Cannot read property 'props' of undefined"

Bất kỳ ai giúp tôi! : ((

Answer 1

Array.prototype.map() mất một số thứ hai để thiết lập những gì this đề cập đến trong các chức năng lập bản đồ, do đó vượt qua this như là đối số thứ hai để bảo vệ bối cảnh hiện nay:

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

Ngoài ra, bạn có thể sử dụng một ES6 arrow function để tự động bảo vệ hiện hành this bối cảnh:

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