javascript - 绑定(bind)函数作为属性传递 React

Question

我试图传递一个绑定(bind)函数(参数)(有一个 setState())作为属性，但我遇到了这个错误，我实际上不确定如何传递这种函数。

Cannot read property 'upadateComment' of undefined

这是我在 index.js 文件中的类片段，(具有函数的类)

removeComment = (i) => {
    console.log('removing comment: ' + i);
    var arr = this.state.comments;
    arr.splice(i, 1);
    this.setState({comments: arr});
}

upadateComment = (newText , i) => {
    console.log('updating comment: ' + i);
    var arr = this.state.comments;
    arr[i] = newText;
    this.setState({comments: arr});
}


eachComment(text, i) {
    return (
        <Comment                            
        key={i} index={i} updateCommentText={this.upadateComment}//here is the problem
        removeCommentText={this.removeComment}> //and here 
        {text}
        </Comment>
    );
}

render() {
    return (
        <div>
            {this.state.comments.map(this.eachComment)}
        </div>
    );
}

这是调用它们的地方(Comment.js 文件)

edit = () => {
    this.setState({editing: true});
}

remove = () => {
    this.props.removeCommentText(this.props.index);
    console.log('removing');
}

save = () => {
    this.props.updateCommentText(this.refs.newText.value , this.props.index);
    console.log('new Text: ');
    this.setState({editing: false});
}

Answer 1

由于 eachComment 是一个函数声明，它引用了错误的 this 上下文。我建议您将其更改为 arrow function。

eachComment = (text, i) => {
    return (
        <Comment                            
        key={i} index={i} updateCommentText={this.upadateComment}
        removeCommentText={this.removeComment}>
        {text}
        </Comment>
    );
}