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：无法设置未定义的属性'setState'

编辑：通过在构造函数中进行以下更改来解决此问题

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

Answer 1

更正：

您缺少函数调用。
if else 没有以正确的方式使用。相反，您可以使用三元运算符。

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

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

this绑定：

在构造函数中：

constructor(){

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

或使用箭头功能：

edit = () = {
  //code
}

save = () => {

  //code
}

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

1 个答案: