描述

使用.map(function(v,i)生成元素添加onClick事件:onClick={() => this.handlerClickArticleUrl(v.article_url)}时,前台访问报错:Uncaught TypeError: Cannot read property 'handlerClickArticleUrl' of undefined

handlerClickArticleUrl是在class里定义的方法

handlerClickArticleUrl(url){
        console.log("点击的文章链接是:"+url);
    }

调用方法如下

{
    article.map(function (v,i){
        return (
            <a href={v.article_url} target="_blank" onClick={() => this.handlerClickArticleUrl(v.article_url)}>{v.title}</a>
        )
    }
}

分析

通过分析为this在嵌套函数中,而嵌套函数可以通过闭包捕获父函数的变量,但是这个函数没有继承this,所以导致this指向不明报错undefined

解决

1.bind(this)

{
    article.map(function (v,i){
        return (
            <a href={v.article_url} target="_blank" onClick={this.handlerClickArticleUrl.bind(this,v.article_url)}>{v.title}</a>
        )
    }.bind(this))
}

2.将this做为参数传入

{
    article.map(function (v,i){
        return (
            <a href={v.article_url} target="_blank" onClick={this.handlerClickArticleUrl.bind(this,v.article_url)}>{v.title}</a>
        )
    },this)
}

3.在render中将this捕获为self,使用this时改为使用self

render(){
        let self = this;
        return (
            {
                article.map(function (v,i){
                return (
                    <a href={v.article_url} target="_blank" onClick={self.handlerClickArticleUrl.bind(self,v.article_url)}>{v.title}</a>
                )    
                })
            }
        )
    }

参考

https://segmentfault.com/a/1190000011703112

原文链接:https://miansen.wang/2018/11/30/1/