Javascript 错误：函数作为子函数无效

我知道这个问题有一个重复的问题，但这对我没有任何帮助。以下是我的index.js：

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.formSet = this.formSet.bind(this);
    this.state = { editing: false, ename: "Edit", sname: "Save" };
  }

  formNormal() {

    return (
      <div>
        <h4>{this.state.ename}</h4>
        <p>Hello there!</p>
        <button onClick={!this.formSet}>{this.props.etext}</button>
      </div>
    );

  }

  formEdit() {

    return (
      <div>
        <h4>{this.state.sname}</h4>
        <input type="textarea" defaultValue="Hello there!" />
        <button onClick={this.formNormal}>{this.props.stext}</button>
      </div>
    );

  }

  formSet() {

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

  }

  render() {

    if (this.state.editing) {
      return (this.formEdit);
    }

    else {
      return (this.formNormal);
    }

  }

}

render(<App etext="Edit" stext="Save" />, document.getElementById('root'));

import React，{Component}来自'React'；
从'react dom'导入{render}；
导入“/style.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.formSet=this.formSet.bind（this）；
this.state={editing:false，ename:“Edit”，sname:“Save”}；
}
formNormal（）{
返回(
{this.state.ename}
你好

{this.props.etext}
);
}
formEdit（）{
返回(
{this.state.sname}
{this.props.stext}
);
}
formSet（）{
返回（this.setState（{editing:true}））；
}
render（）{
if（this.state.editing）{
返回（this.formEdit）；
}
否则{
返回（此为正常格式）；
}
}
}
render（，document.getElementById（'root'））；

下面是错误：

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
in App

警告：函数作为子函数无效。如果返回组件而不是从渲染返回组件，则可能会发生这种情况。或者你是想调用这个函数而不是返回它。
应用程序内

我是一个新的反应者。

有两个错误： 转换

返回（this.formEdit）

到

返回（this.formEdit（））

和

返回（this.formEdit）

to

return（this.formEdit（））

this.formEdit
是一个函数，您希望在页面中呈现的是函数返回的内容，即通过
this.formEdit（）执行
this.formEdit
函数。您不能呈现函数，但可以呈现函数返回的内容，即有效的JSX

绑定没有正确使用。因此，我刚刚添加了整个示例，它将起作用。看一看


类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.formSet=this.formSet.bind（this）；
this.formNormal=this.formNormal.bind（this）；
this.formEdit=this.formEdit.bind（this）；
this.state={editing:false，evalue:'Hello here！'，ename:this.props.eText，sname:this.props.sname}；
}
formNormal（）{
返回(
{this.state.ename}
{this.state.evalue}

{this.props.etext}
);
}
handleChange=（e）=>{
这是我的国家({
评估值：即目标值，
});
}
formEdit（）{
返回(
{this.state.sname}
{this.props.stext}
);
}
formSet（）{
this.setState（{editing:！this.state.editing}）；
}
render（）{
if（this.state.editing）{
返回（this.formEdit（））；
}
否则{
返回（this.formNormal（））；
}
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

非常感谢您经历了这么多麻烦！非常感谢。但是，嘿，我还有两个疑问；我们什么时候使用bind函数，你能推荐一个好的、资源丰富的地方来掌握ReactJS吗？再次感谢。简而言之，
handleChange
是使用arrow函数定义的，它将保留其父对象的范围，因此无需绑定
formEdit
是在没有箭头函数的情况下定义的，箭头函数会放宽其父级的范围，因此需要显式绑定。我建议（），这是你最好的选择。