React.js“TypeError：无法设置未定义的属性'setState'”

Question

import React, { Component } from 'react';

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

  edit() {
    this.setState = { editing: true };
  }

  remove() {
    this.props.deleteFromBoard(this.props.index);
  }

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

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

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

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

export default Comment;

当我试图执行这段代码时，它说“函数作为React子句无效。如果你返回一个Component而不是render，可能会发生这种情况。或许你打算调用这个函数而不是返回它。”我也试过在div中包含return语句，但它仍然给出了同样的错误。我是React.js的新手，所以有人可以指出一些文档或解释这个错误背后的原因以及如何解决它？我也看了类似的问题，但找不到符合我要求的东西。

编辑：我已经编辑了我的渲染，看起来像这样

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

已经解决了这个问题，但现在当我点击编辑它时会出现以下错误：

TypeError：无法设置undefined的属性'setState'

编辑：这通过在构造函数中进行以下更改得到解决

constructor(props){
super(props);
this.state = {
  editing : false,
};
this.edit = this.edit.bind(this);
this.save = this.save.bind(this);
}

Answer 1

更正：

1. 你缺少函数调用。
2. 如果没有以正确的方式使用。相反，你可以使用三元运算符。

   render() {
     {
       this.state.editing
         ? this.renderForm()
         : this.renderNormal()
     }
   }

或使用if - else。

render() {

  let MyComp = "";
  if (this.state.editing) 
    MyComp = this.renderForm;
  else 
    MyComp = this.renderNormal;
  }

    return (<MyComp/>);
}

3. 在edit和save函数中，您使用的是this。但是您没有将this绑定到组件范围。

做this绑定要么：

在构造函数中：

constructor(){

   this.edit = this.edit.bind(this);
   this.save = this.save.bind(this);
}

或使用箭头功能：

edit = () = {
  //code
}

save = () => {

  //code
}