React.Component Onclick事件：Comments.js：189 Uncaught TypeError：无法读取属性＆＃39; removeCommentMutation＆＃39;未定义的

Question

所以，我希望使用onClick事件调用一个函数，并从事件中传递一些参数，但是我收到了上面提到的错误消息。

我在这里俯瞰什么？

我的代码如下：

＆＃13;

＆＃13;

class Comments extends React.Component {

  constructor(props) {
    super(props);
    this.removeCommentMutation = this.removeCommentMutation.bind(this);
  }
  
  removeCommentMutation (postID, commentID) {
  ....
  }

  handleSubmitError (err) {
    console.error(err.message);
  }

  renderComment (comments) {
    return (
      <div className="comment" key={comments.id}>
        <p>
          <strong>{comments.user}</strong>
          {comments.text} 
          <button className="remove-comment" onClick={() => this.removeCommentMutation(this.props.postId, comments.id)}>&times;</button>
        </p>
      </div>
    );
  }
  handleSubmit (e) {
    e.preventDefault();
    this.addCommentMutation(this.props.postId, this.refs.author.value, this.refs.comment.value);
    this.refs.commentForm.reset();
    this.refs.author.focus();
  }

  render () {
    const comments = this.props.post.comments || [];
    const currentPosts = comments.map(this.renderComment);

    return (
      <div className="comments">

        {currentPosts}

        <form onSubmit={this.handleSubmit} ref="commentForm" className="comment-form">
          <input type="text" ref="author" placeholder="author"/>
          <input type="text" ref="comment" placeholder="comment"/>
          <input type="submit" hidden/>
        </form>
      </div>
    );
  }
};

}

＆＃13;

＆＃13;

＆＃13;

完整错误是：

＆＃13;

＆＃13;

Comments.js:189 Uncaught TypeError: Cannot read property 'removeCommentMutation' of undefined
    at onClick (http://localhost:7770/static/bundle.js:36072:30)
    at HTMLUnknownElement.wrapped (http://localhost:7770/static/bundle.js:63526:29)
    at Object.ReactErrorUtils.invokeGuardedCallback (http://localhost:7770/static/bundle.js:43148:16)
    at executeDispatch (http://localhost:7770/static/bundle.js:70629:21)
    at Object.executeDispatchesInOrder (http://localhost:7770/static/bundle.js:70652:5)
    at executeDispatchesAndRelease (http://localhost:7770/static/bundle.js:7436:22)
    at executeDispatchesAndReleaseTopLevel (http://localhost:7770/static/bundle.js:7447:10)
    at Array.forEach (native)
    at forEachAccumulated (http://localhost:7770/static/bundle.js:44180:9)
    at Object.processEventQueue (http://localhost:7770/static/bundle.js:7652:7)
    at runEventQueueInBatch (http://localhost:7770/static/bundle.js:74532:18)
    at Object.handleTopLevel [as _handleTopLevel] (http://localhost:7770/static/bundle.js:74548:5)
    at handleTopLevelWithoutPath (http://localhost:7770/static/bundle.js:74651:24)
    at handleTopLevelImpl (http://localhost:7770/static/bundle.js:74631:3)
    at ReactDefaultBatchingStrategyTransaction.perform (http://localhost:7770/static/bundle.js:12582:20)
    at Object.batchedUpdates (http://localhost:7770/static/bundle.js:42559:19)
    at Object.batchedUpdates (http://localhost:7770/static/bundle.js:2907:20)
    at dispatchEvent (http://localhost:7770/static/bundle.js:74762:20)
    at HTMLDocument.wrapped (http://localhost:7770/static/bundle.js:63526:29)

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要bind所有功能。在React中，this的上下文为undefined。直到您使用bind()将上下文更改为您的组件。

您可以通过以下两种方式之一完成此任务。

使用.bind()

class Comments extends React.Component {

  constructor(props) {
    super(props);
    this.removeCommentMutation = this.removeCommentMutation.bind(this);
    this.handleSubmitError = this.handleSubmitError.bind(this);
    this.renderComment = this.renderComment.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  removeCommentMutation (postID, commentID) {
  ....
  }

  handleSubmitError (err) {
    console.error(err.message);
  }

  renderComment (comments) {
    return (
      <div className="comment" key={comments.id}>
        <p>
          <strong>{comments.user}</strong>
          {comments.text} 
          <button className="remove-comment" onClick={() => this.removeCommentMutation(this.props.postId, comments.id)}>&times;</button>
        </p>
      </div>
    );
  }
  handleSubmit (e) {
    e.preventDefault();
    this.addCommentMutation(this.props.postId, this.refs.author.value, this.refs.comment.value);
    this.refs.commentForm.reset();
    this.refs.author.focus();
  }

  render () {
    const comments = this.props.post.comments || [];
    const currentPosts = comments.map(this.renderComment);

    return (
      <div className="comments">

        {currentPosts}

        <form onSubmit={this.handleSubmit} ref="commentForm" className="comment-form">
          <input type="text" ref="author" placeholder="author"/>
          <input type="text" ref="comment" placeholder="comment"/>
          <input type="submit" hidden/>
        </form>
      </div>
    );
  }
};

}

使用箭头功能 - ES6

JavaScript中this的上下文通常取决于函数的调用方式。使用箭头函数，上下文是词法，意味着this由外部范围（在本例中是您的注释组件）确定。

你可以使用像这样的箭头功能，这意味着你不必每次只用bind()方法。

class Comments extends React.Component {

  constructor(props) {
    super(props);
  }

  removeCommentMutation = (postID, commentID) => {
  ....
  }

  handleSubmitError = (err) => {
    console.error(err.message);
  }

  renderComment = (comments) => {
    return (
      <div className="comment" key={comments.id}>
        <p>
          <strong>{comments.user}</strong>
          {comments.text} 
          <button className="remove-comment" onClick={() => this.removeCommentMutation(this.props.postId, comments.id)}>&times;</button>
        </p>
      </div>
    );
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.addCommentMutation(this.props.postId, this.refs.author.value, this.refs.comment.value);
    this.refs.commentForm.reset();
    this.refs.author.focus();
  }

  render () {
    const comments = this.props.post.comments || [];
    const currentPosts = comments.map(this.renderComment);

    return (
      <div className="comments">

        {currentPosts}

        <form onSubmit={this.handleSubmit} ref="commentForm" className="comment-form">
          <input type="text" ref="author" placeholder="author"/>
          <input type="text" ref="comment" placeholder="comment"/>
          <input type="submit" hidden/>
        </form>
      </div>
    );
  }
};

}

请注意foo = () => {}语法。您不必为组件生命周期方法执行此操作，例如componentWillMount，componentDidMount并且您不必为render执行此操作。