エラー：onClickリスナーが関数であると予想されましたが、代わりにreactjsを使用して型オブジェクトが取得されました

Question

私はonClick関数を使用していて、それにオブジェクトを渡そうとしています。私は機能を動作させるためにオブジェクトが必要です。しかし何らかの理由で私にこのエラーが出ています。

エラーは、各コメントでレンダリングしている削除ボタンのonClick機能から発生しています。私がそれを渡しているコメントを取り除くと、エラーは消えてしまいます（関数自体は問題ではありません）。コメントを間違ってやっているのかどうか分からない。

多くの情報をリクエストしたり、ログに何かを書き留めたりしたい場合は、コメントを混雑させないように編集します。

renderCommentsButtons(comment) { 
    const { post, user, auth } = this.props; 

    if(!user) { 
     return (<div></div>); 
    } 

    if(auth) { 
     if(user._id === comment.author.id) { 
     return (
      <div> 
      <button 
       onClick={this.deleteComment, comment} 
       className="btn btn-xs btn-danger"> 
       Delete 
      </button> 
      <Link 
       to={`/posts/${post._id}/comments/${comment._id}/edit`} 
       className="btn btn-xs btn-warning"> 
       Edit 
      </Link> 
      </div> 
     ) 
     } 
    } 
    } 

    renderComments() { 
    const { post } = this.props; 

    return post.comments.map((comment) => { 
     return (
     <li className="list-group-item" key={comment._id}> 
      <div> 
      {comment.text} : {comment.author.email} 
      </div> 
      {this.renderCommentsButtons(comment)} 
     </li> 
    ); 
    }); 
    } 

    deleteComment({ author, _id}) { 
    const {id} = this.props.match.params; 
    const {user} = this.props; 

    if(this.props.auth) { 
     if(user._id === author.id){ 
     this.props.deleteComments(id, _id,() => { 
      this.props.history.push(`/posts/${id}`); 
     }); 
     } 
    } 
    } 

Answer 1

これを試してみてください：

<button 
    onClick={() => this.deleteComment(comment)} 
    className="btn btn-xs btn-danger"> 
    Delete 
</button> 

あなたがonClickは、あなたがパラメータを渡したい場合は、上記のようにそれを行う必要があり、機能のみをとり、正確にコメントを渡していません。