“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! : ((


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) => {
  ...
})

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
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.