"这"在地图函数Reactjs中未定义 [英] "this" is undefined inside map function Reactjs

问题描述

我正在使用Reactjs编写菜单组件。

I'm working with Reactjs, writing a menu component.

"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>
        );
    }
});

每当我在地图函数中使用'this'时它是未定义的，但在它之外没有问题。

Whenever I use 'this' inside map function it is undefined, but outside it is no problem.

错误：

无法读取未定义的属性'props'

"Cannot read property 'props' of undefined"

有人帮助我！ ：（（

推荐答案

Array.prototype.map（） 接受第二个参数来设置 this 在映射函数中引用，因此传递 this 作为保留当前上下文的第二个参数：

Array.prototype.map() takes a second argument to set what this refers to in the mapping function, so pass this as the second argument to preserve the current context:

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

或者，您可以使用ES6 箭头功能自动保留当前此上下文：

Alternatively, you can use an ES6 arrow function to automatically preserve the current this context:

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

这篇关于"这"在地图函数Reactjs中未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！