TypeError：this.props.updateCommentText不是函数

Question

我一直在关注反应的教程。 一切都很好，但是现在我似乎无法解决一个错误。 非常感谢您的帮助。

我正在尝试为注释编辑文本变量，但是当我尝试调用该函数时，出现以下错误。

错误：TypeError：
this.props.updateCommentText is not a function

董事会班：

class Board extends React.Component{
  constructor(props){
    super(props);
    this.state = {
        comments: [
          "Hello1",
          "Hello2",
          "Hello3",
        ],
    };
  }
  getInitialState() {
    return {comments: [
      "Hello1",
      "Hello2",
      "Hello3",
    ]}
  }

  removeComment(i){
    var arr = this.state.comments;
    arr.splice(i, 1);
    this.setState({comments: arr})
  }

  updateComment(i, newText){
    var arr = this.state.comments;
    arr[i] = newText;

  }

  eachComment(text, i){
    return(
      <Comment key={i} index={i} updateCommentText={this.updateComment.bind(this)} deleteFromBoard={this.removeComment}>
        {text}
      </Comment>);
  }

  render(){
    return(
      <div className="board">
        {this.state.comments.map(this.eachComment.bind(this))}
      </div>
    )
  }
}

评论类别：

    class Comment extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      editing : false,
      text : "",
    };
  }

  getInitialState() {
    return {editing: false}
  }
  edit() {
    this.setState({editing: true});
  }

  remove() {
    console.log('delete');
    this.props.deleteFromBoard(this.props.index)
  }

  save() {
    var text = this.refs.newText.value;
    this.props.updateCommentText(this.props.index, text);
    this.setState({editing: false});
  }

  renderNormal(){
    return(
      <div className="commentContainer">
        <div className="commentText">{this.props.children}</div>
        <button onClick={this.edit.bind(this)} className="button-primary">Edit</button>
        <button onClick={this.remove} className="button-primary">Remove</button>
      </div>
    );
  }

  renderForm(){
    return(
      <div className="commentContainer">
        <textarea ref="newText" defaultValue={this.props.children}></textarea>
        <button onClick={this.save.bind(this)} className="button-primary">Save</button>
      </div>
    );
  }

  render(){
      if(this.state.editing){
        return this.renderForm();
      }else{
        return this.renderNormal();
      }
  }
}

Answer 1

首先要注意的是：在您的Board Component中，您同时声明了getInitialState和Constructor，它们实际上是同一件事 。 构造函数是react的新正负 ，getInitialState被废弃 。
其次，避免使用内联绑定，在构造函数中声明。 因此，如果ypu这样重写您的构造函数，则在Board类中会更好：

  constructor(props){
    super(props);
    this.state = {
        comments: [
          "Hello1",
          "Hello2",
          "Hello3",
        ],
    };
    this.updateComment = this.updateComment.bind(this);
    this.removeComment=this.removeComment.bind(this);
  }

最后，也可能是您的错误，您需要将上下文传递给Board组件内部的props。

  <Comment key={i} index={i} updateCommentText={this.updateComment(i, text)} deleteFromBoard={this.removeComment(i)}>
        {text}
      </Comment>);

Answer 2

确实很奇怪。 我无法说出您为什么收到此错误。 看起来一切都已正确连接，我尝试了上面的代码。 我能够点击“保存”按钮而没有看到此错误。 但是，有几件事应该更改：

• removeComment在deleteFromBoard道具中缺少绑定
• 在Comment remove也没有约束力。
• 尝试避免在render函数中使用bind 。 这意味着您在每次渲染组件时都进行绑定。 在构造函数中执行一次。
• 您不必通过index 。 只需使用this.updateComment.bind(this, i) 。 这将使updateComment部分执行。 （在这种情况下，您必须在此处使用bind ）。
• 在updateComment您正在改变状态，但没有调用setState 。 确实应该有this.setState({ comments: arr }) 。 否则，您将看不到编辑内容。