javascript - React.Component Onclick事件: Comments. js:189 Uncaught TypeError:无法读取未定义的属性 'removeCommentMutation'

Question

因此，我希望使用 onClick 事件调用函数并向其传递该事件中的一些参数，但收到上述错误消息。

我在这里忽略了什么？

我的代码如下:

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

}

完整的错误是:

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)

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 由外部范围(在本例中是您的 Comments 组件)确定。

您可以像这样使用箭头函数，这意味着您不必不断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 执行此操作。