“Ini” tidak terdefinisi di dalam fungsi peta Reactjs

101

Saya bekerja dengan Reactjs, menulis komponen 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>
        );
    }
});

Setiap kali saya menggunakan fungsi peta dalam 'ini', itu tidak ditentukan, tetapi di luar itu tidak masalah.

Kesalahannya:

"Tidak dapat membaca properti 'props' dari tidak ditentukan"

Ada yang membantu saya! : ((

iamhuy
sumber

Jawaban:

308

Array.prototype.map()mengambil argumen kedua untuk menyetel apa yang thisdirujuk dalam fungsi pemetaan, jadi teruskan thissebagai argumen kedua untuk mempertahankan konteks saat ini:

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

Alternatifnya, Anda dapat menggunakan fungsi panah ES6 untuk secara otomatis mempertahankan thiskonteks saat ini :

someList.map((item) => {
  ...
})
Jonny Buchanan
sumber
begitu Anda melewatkan argumen kedua ini, apakah itu berarti bahwa ini mengacu pada objek global, lalu jika ya, mengapa demikian?
Eugen Sunic
23
Hmm, untuk beberapa alasan saya tidak melihat thisterikat bahkan saat menggunakan fungsi panah dengan TypeScript.
Lucas
1
Saya memiliki perilaku yang sama dengan Lucas, menggunakan react. Sintaks fungsi kuno berfungsi untuk saya. Aneh sekali.
MoonBoots89