如何在地图中访问正确的“this”：ReactJS

IT技术 javascript reactjs
2021-04-07 07:24:01

例如，我有一个具有两种绑定方法的react组件：

import React from 'react';

class Comments extends React.Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleRemoveComment = this.handleRemoveComment.bind(this);
    }

    handleSubmit(e) {
        .....
    }

    handleRemoveComment(e) {
        //this.props.removeComment(null, this.props.params, i);
    }

    renderComment(comment, i) {
        return(
            <div className="comment" key={i}>
                  .....
                  <button 
                       onClick={this.handleRemoveComment}
                       className="remove-comment">
                       &times;
                  </button>
            </div>
        )
    }

    render() {
        return(
            <div className="comments">

                {this.props.postComments.map(this.renderComment)}

                .....
            </div>
        )
    }
}

export default Comments;

在上面的代码中，我有两种绑定方法：一种是handleSubmit，一种是handleRemoveComment。handleSubmit功能有效但handleRemoveComment没有。运行时，返回错误：

类型错误：无法读取未定义的属性“handleRemoveComment”

1个回答

问题出在这一行：

{this.props.postComments.map( this.renderComment )}

因为忘记绑定renderComment、映射回调方法，所以this里面的renderComment方法不会引用类上下文。

使用这些解决方案中的任何一种，它都会起作用。

1-使用这一行constructor：

this.renderComment = this.renderComment.bind(this) ;

2-通行证this与map这样的：

{this.props.postComments.map(this.renderComment, this)}

3-使用带有renderComment方法的箭头函数，如下所示：

renderComment = (comment, i) => {
    .....

或者在renderComment函数内部使用地图（我以前更喜欢这种方式），如下所示：

renderComment() {
    return this.props.postComments.map((comment, i) => {
        return(
            <div className="comment" key={i}>
                <p>
                    <strong>{comment.user}</strong>
                    {comment.text}
                    <button 
                        onClick={this.handleRemoveComment}
                        className="remove-comment">
                        &times;
                    </button>
                </p>
            </div>
        )
    })
}

并从 调用此方法render，在这种情况下renderComment不需要绑定：

{this.renderComment()}
原因是：如果您不绑定上下文，则this关键字（请参阅类）在map正文中将不可用，这就是为什么当您删除removeComment它时它正在工作，如果您想使用this关键字，则需要绑定上下文。通过阅读源代码，它是地图主体的一个非常常见的问题:)
2021-06-03 07:24:01
...或只需添加, this调用map：{this.props.postComments.map(this.renderComment, this)}
2021-06-09 07:24:01
检查更新的答案，您可以尝试任何一种解决方案，感谢@TJCrowder 提供非常简单的解决方案:)
2021-06-12 07:24:01
哇。非常感谢。我认为在handleRemoveComment因为错误消息中存在一些问题。我有两个问题： 1. 为什么你能知道错误renderComment（通过仔细阅读源代码或根据你的经验......） 2. 如果我删除代码onClick={this.handleRemoveComment}，没有发现错误。
2021-06-18 07:24:01
其它你可能感兴趣的问题
上一篇React-router v4 中的嵌套路由和动态路由 下一篇如何在 redux 中调度函数？