Uncaught TypeError：無法讀取null的屬性'stopPropagation'？ - ReactJS

陣營組件Uncaught TypeError：無法讀取null的屬性'stopPropagation'？ - ReactJS

export default class CommentBox extends React.Component { 
    constructor() { 
    super() 

    this.state ={ 
     showComments: false, 
     comments: [ 
     { id: uuid.v4(), author: 'Clu', body: 'Just say no to love!', avatarUrl: 'images/default-avatar.png' }, 
     { id: uuid.v4(), author: 'Anne Droid', body: 'I wanna know what love is...', avatarUrl: 'images/default-avatar.png' } 
     ] 
    } 
    } 

    render() { 
    const comments = this._getComments() || []; 

    let commentList; 
    if (this.state.showComments) { 
     commentList = <div className="comment-list">{comments}</div> 
    } 

    return(
     <div className="comment-box"> 
     <h3>COMMENTS</h3> 
     {this._getPopularMessage(comments.length)} 
     <h4 className="comment-count">{this._getCommentsTitle(comments.length)}</h4> 
     <button className="comment-toggle" onClick={this._toggleShowComments.bind(this)}>{this._toggleCommentButton()}</button> 
     <CommentForm addComment={this._addComment.bind(this)}/> 
     {commentList} 
     </div> 
    ); 
    } 

    _addComment(author, body) { 
    const comment = { 
     id: uuid.v4(), 
     author: author, 
     body: body 
    } 

    this.setState({comments: this.state.comments.concat([comment])}) 
    } 

    _getComments() { 

    return this.state.comments.map((comment) => { 
     return (<Comment 
       author={comment.author} 
       body={comment.body} 
       avatarUrl={comment.avatarUrl} 
       key={comment.id} 
       onDelete = {this._deleteComment.bind(this, null, comment.id)}/>) 
    }); 
    }

的主要問題... 如果我離開了event.stopPropagation，當我運行這一點，並點擊「刪除評論」鏈接，一切正常。但是，當我添加它時，出現錯誤Uncaught TypeError: Cannot read property 'stopPropagation' of null。我假設Comment組件中的onClick事件（請參閱底部代碼框）並未通過事件傳遞。有什麼方法可以糾正這個問題嗎？

_deleteComment(event, key) { 
    event.stopPropagation() 
    console.log(key) 
    this.setState (
     {comments: this.state.comments.filter((singleComment) => singleComment.id !== key) 
     } 
    ) 
    console.log(this.state.comments) 
    } 
}

作爲參考，註釋組件：我試圖結合（this）來onDelete例如<a className="comment-actions-delete" href="#" onClick={this.props.onDelete.bind(this)}>Delete comment</a>但它似乎沒有工作。

export default class Comment extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     isAbusive: false 
    }; 
    } 

    render() { 
    let commentBody; 
    if (!this.state.isAbusive) { 
     commentBody = this.props.body; 
    } else { 
     commentBody = <em>Content marked as abusive</em>; 
    } 
    return(
     <div className="comment"> 
     <p className="comment-header">{this.props.author}</p> 
     <p className="comment-body"> 
      {commentBody} 
     </p> 
     <div className="comment-actions"> 
      <VotingButtons /> 
      <a className="comment-actions-delete" href="#" onClick={this.props.onDelete}>Delete comment</a> 
      <a className="comment-actions-abuse" href="#" onClick={this._toggleAbuse.bind(this)}>Report as abuse</a> 
     </div> 
     </div> 
    ); 
    } 

    _toggleAbuse(event) { 
     event.preventDefault(); 
     this.setState({isAbusive: !this.state.isAbusive}) 
    } 
}

來源

2016-07-12 Pmmoks

你可以清理你的代碼示例有點堅持代碼的相關部分？ – Maggie

謝謝，這是更好嗎？ – Pmmoks

可能是你有一個錯字？

this.setState (
{coments: this.state.comments.filter((singleComment) => singleComment.id !== key) 
     }

commentList = <div className="comment-list">{comments}</div>

換句話說，要設置 '評析'，但檢索 '評論'。

來源

2016-07-12 11:28:43 Maggie

謝謝！它的工作，不能相信我沒有看到這一點 – Pmmoks

Uncaught TypeError：無法讀取null的屬性'stopPropagation'？ - ReactJS

回答

相關問題