【问题标题】:Error: Expected onClick listener to be a function, instead got type object using reactjs错误:预期 onClick 侦听器是一个函数,而不是使用 reactjs 获得类型对象
【发布时间】:2017-07-03 15:43:38
【问题描述】:

我正在使用一个 onClick 函数并尝试用它传递一个对象。我需要该对象来使该功能正常工作。但由于某种原因,它给了我这个错误。

错误来自我在每个评论上呈现的删除按钮的 onClick 函数。如果我删除我传递的评论,错误就会消失(所以函数本身不是问题)。我不确定我是通过错误的方式传递评论还是什么。

正如我通常所做的那样,如果您请求更多信息或希望我尝试控制台记录某些内容,我会将其放入编辑中,这样 cmets 就不会变得拥挤,并且其他人会更容易看到。

    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}`);
        });
      }
    }
  }

【问题讨论】:

    标签: javascript reactjs redux


    【解决方案1】:

    试试这个:

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

    你没有正确传递注释,onClick 只接受一个函数,如果你想传递参数,你必须像上面那样做。

    【讨论】:

    • 这导致它工作!我怎么就不能像我一样通过呢?我以前做过,效果很好。
    • @TaylorAustin 你错了。您以前从未这样做过,因为 react 事件处理程序只接受一个参数,即在事件发生时调用的函数。如果你能找到那个例子,我可以说明为什么它不同
    • 我弄错了对不起,你能在这里帮忙解决这个问题吗? stackoverflow.com/questions/44891664/…
    猜你喜欢
    • 1970-01-01
    • 2017-12-03
    • 2021-04-26
    • 1970-01-01
    • 1970-01-01
    • 2019-05-29
    • 2022-08-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多