Uncaught TypeError: Не удается прочитать свойство «stopPropagation» из null? - ReactJS

Question

Реагировать Компонент

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. Я предполагаю, что событие onClick в компоненте Comment (см. Нижнее поле кода) не проходит через событие. Есть ли способ исправить это?

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

Для справки, компонент Комментарий: Я попытался связывания (это), чтобы 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}) 
    } 
} 

Answer 1

Возможно, у вас есть опечатка?

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

против

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

Другими словами, вы настраиваете 'коментарии', но получение 'комментарии'.