Javascript TypeError:this.props.updateCommentText不是函数

我一直在学习react的教程。一切都很顺利，但现在我遇到了一个似乎无法解决的错误。非常感谢您的帮助

我试图编辑注释的文本变量，但是当我试图调用函数时，它会出现以下错误

错误：类型错误：

this.props.updateCommentText不是一个函数

董事会级别：

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

类板扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
评论：[
“你好”，
“你好”，
“你好”，
],
};
}
getInitialState（）{
返回{注释：[
“你好”，
“你好”，
“你好”，
]}
}
removeComment（一）{
var arr=this.state.comments；
阵列拼接（i，1）；
this.setState（{comments:arr}）
}
更新注释（i，newText）{
var arr=this.state.comments；
arr[i]=新文本；
}
每项内容（正文，i）{
返回(
{text}
);
}
render（）{
返回(
{this.state.comments.map（this.eachComment.bind（this））}
)
}
}

注释类：

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

类注释扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
编辑：错，
正文：“，
};
}
getInitialState（）{
返回{编辑：false}
}
编辑（）{
this.setState（{editing:true}）；
}
删除（）{
console.log（'delete'）；
this.props.deleteFromBoard（this.props.index）
}
保存（）{
var text=this.refs.newText.value；
this.props.updateCommentText（this.props.index，text）；
this.setState（{editing:false}）；
}
renderNormal（）{
返回(
{this.props.children}
编辑
去除
);
}
renderForm（）{
返回(
拯救
);
}
render（）{
if（this.state.editing）{
返回这个.renderForm（）；
}否则{
返回这个.renderNormal（）；
}
}
}

第一件事：在

板上

组件中，您同时声明getInitialState和构造函数，它们实际上是同一件事。constructor是react的新sintax，getInitialState是去种族化的
第二，避免使用绑定内联，在构造函数中声明。因此，在Board类中，如果ypu像这样重写构造函数会更好：

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

最后，也可能是您的错误，您需要将上下文传递给您的道具，板内组件

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

{text}
);

这确实很奇怪。我说不出你为什么会犯这个错误。看起来一切都连接正确，我试过上面的代码。我能够在没有看到这个错误的情况下点击保存按钮。然而，有两件事需要改变：

• removeComment

  在

  deleteFromBoard

  prop中缺少绑定

• 注释中的
  删除
  也没有绑定

• 尽量避免在

  render

  函数中使用

  bind

  。这意味着您每次渲染组件时都要进行绑定。在构造函数中执行此操作一次
• 您不必通过

  索引

  。只需使用

  this.updateComment.bind（this，i）

  。这将使

  updateComment

  部分执行。（在这种情况下，您必须在那里使用

  bind

  ）
• 在

  updateComment

  中，您正在改变状态，但没有调用

  setState

  。确实应该有

  this.setState（{comments:arr}）

  。否则，您将无法看到编辑

---

您是否缺少绑定

deleteFromBoard={this.removeComment.bind（this）}

Hm。。。你是说

this.updateComment.bind（this，i，text）

。我这样问是因为在您的示例中，函数是直接调用的。在构造函数中设置绑定是一个很好的技巧！然而，我也需要绑定，就像克拉西米尔在他的推荐中所做的那样，让它发挥作用！还感谢您解释了depracated方法。@YuriRamos我的意思是，当您将函数作为prop值提供时，不应该在那里调用该函数。您应该传递函数，可能部分执行，但是这个.updateComment（i，text）看起来像是在渲染时调用函数。