Javascript 使用状态时，render在react js中不工作

我试图在render方法上显示内容，但代码无法在React JS中执行

onClick

。我一直在上这门课

import React, { Component } from 'react';
import './App.css';
import New from './New/New';
import Old from './Old/Old';


class  App extends Component  {
    state = {
        theirName : [
            {name:'Faisal', pind:'bhouch', age: 23}, 
            {name:'Haroon', pind:'Harrror', age: 17}
        ],
        showPerson : false,
    }

    togglePersonHandler =()=>{
    //this.setState({showPerson : !this.state.showPerson})
    const doesshow = this.state.showPerson;
    this.setState({showPerson : !doesshow});

    }

    switchNameHandler = (noname) =>{
        this.setState({
            theirName : [
                {name:'Faisal', pind: noname, age: 20}, 
                {name:'Haroon', pind:'england', age: 17} 
            ]
        });
    }
    render() {
        let persons = null;
        if (this.state.showPerson === true){
            persons =(
                <div>
                    <New name={this.state.theirName[0].name} pind={this.state.theirName[0].pind} age={this.state.theirName[0].age}> </New> 
                    <Old  name={this.state.theirName[1].name} pind={this.state.theirName[1].pind} age={this.state.theirName[1].age}></Old>
                </div>
            );
        }
        return (
            <div className="App">
                <h1>Click on this to show content</h1>
                <button onClick={this.togglePersonHandler} >switch</button>
                <persons />
            </div>
        );
    }
}
export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从“./New/New”导入新内容；
从“./Old/Old”导入旧文件；
类应用程序扩展组件{
状态={
他们的名字：[
{姓名：'Faisal'，品德：'bhouch'，年龄：23}，
{姓名：'Haroon'，品脱：'Harrror'，年龄：17}
],
表演者:错,，
}
togglePersonHandler=（）=>{
//this.setState（{showPerson:！this.state.showPerson}）
const doesshow=this.state.showPerson；
this.setState（{showPerson:！doesshow}）；
}
switchNameHandler=（非名称）=>{
这是我的国家({
他们的名字：[
{姓名：'Faisal'，品名：noname，年龄：20}，
{姓名：'Haroon'，品脱：'england'，年龄：17}
]
});
}
render（）{
让persons=null；
if（this.state.showPerson==true）{
人=(
);
}
返回(
单击此按钮以显示内容
转换
);
}
}
导出默认应用程序；

---

在执行错误的操作时，代码中也没有错误或bug？

我认为您的返回不是渲染函数的一部分。希望这有帮助

render() {
    let persons = null;
    if (this.state.showPerson === true){
      persons =(
        <div>
    <New name={this.state.theirName[0].name} pind={this.state.theirName[0].pind} age={this.state.theirName[0].age}> </New> 
    <Old  name={this.state.theirName[1].name} pind={this.state.theirName[1].pind} age={this.state.theirName[1].age}></Old>
    </div>
  );
      }
 // }  =>render function gets closed. It should be closed after return statement
// } => extra brackets

  // {  Also, return should be inside of render
   return (
    <div className="App">
    <h1>Click on this to show content</h1>
    <button onClick={this.togglePersonHandler} >switch</button>
    <persons />
   </div>
  );
} //closing for render
} //closing for App

render（）{
让persons=null；
if（this.state.showPerson==true）{
人=(
);
}
//}=>render函数关闭。它应该在return语句之后关闭
//}=>额外括号
//{此外，return应该位于render的内部
返回(
单击此按钮以显示内容
转换
);
}//正在关闭以进行渲染
}//正在关闭应用程序

在渲染返回之前，我注意到一个打开的大括号。旁注

我认为你的职能与你的工作范围有冲突。尝试这样声明它们：

togglePersonHandler () {
  // stuff here, and now 'this' should work
}

---

请检查此项工作正常： 1-返回不是渲染的一部分 2-使用{persons}代替----

import React，{Component}来自'React'；
导入“/App.css”；
从“./New/New”导入新内容；
从“./Old/Old”导入旧文件；
类应用程序扩展组件{
状态={
他们的名字：[
{姓名：'Faisal'，品德：'bhouch'，年龄：23}，
{姓名：'Haroon'，品脱：'Harrror'，年龄：17}
],
表演者:错,，
}
togglePersonHandler=（）=>{
//this.setState（{showPerson:！this.state.showPerson}）
const doesshow=this.state.showPerson；
this.setState（{showPerson:！doesshow}）；
}
switchNameHandler=（非名称）=>{
这是我的国家({
他们的名字：[
{姓名：'Faisal'，品名：noname，年龄：20}，
{姓名：'Haroon'，品脱：'england'，年龄：17}
]
});
}
render（）{
让persons=null；
if（this.state.showPerson==true）{
人=(
);
}
返回(
单击此按钮以显示内容
转换
{个人}
);
}
}
导出默认应用程序

//我希望它能帮助你
//您还没有接近渲染
从“React”导入React，{Component}；
导入“/App.css”；
从“./New/New”导入新内容；
从“./Old/Old”导入旧文件；
类应用程序扩展组件{
状态={
他们的名字：[
{姓名：'Faisal'，品德：'bhouch'，年龄：23}，
{姓名：'Haroon'，品脱：'Harrror'，年龄：17}
],
表演者:错,，
}
togglePersonHandler=（）=>{
//this.setState（{showPerson:！this.state.showPerson}）
const doesshow=this.state.showPerson；
this.setState（{showPerson:！doesshow}）；
}
switchNameHandler=（非名称）=>{
这是我的国家({
他们的名字：[
{姓名：'Faisal'，品名：noname，年龄：20}，
{姓名：'Haroon'，品脱：'england'，年龄：17}
]
});
}
render（）{
让persons=null；
if（this.state.showPerson==true）{
人=(
);
}
返回(
单击此按钮以显示内容
转换
);
}
}

声明构造函数并将对象设置为this.state={}，而不是使用state={}。我认为在React中无效。您只需使用{persons}

就可以了，在我看来，它就像一个有效的组件实例。我认为这没关系。看例子，希望如此helps@SydneyY，所有组件名称必须以大写字母开头

// I hope it will help you
//you are not  close render 
import React, { Component } from 'react';
import './App.css';
import New from './New/New';
import Old from './Old/Old';


class  App extends Component  {
  state = {
theirName : [
       {name:'Faisal', pind:'bhouch', age: 23}, 
       {name:'Haroon', pind:'Harrror', age: 17}

      ],

       showPerson : false,
 }

togglePersonHandler =()=>{
  //this.setState({showPerson : !this.state.showPerson})
  const doesshow = this.state.showPerson;
  this.setState({showPerson : !doesshow});

}

switchNameHandler = (noname) =>{
this.setState({
    theirName : [
           {name:'Faisal', pind: noname, age: 20}, 
           {name:'Haroon', pind:'england', age: 17} 
          ]
          });
        }
render() {
    let persons = null;
    if (this.state.showPerson === true){
      persons =(
        <div>
    <New name={this.state.theirName[0].name} pind={this.state.theirName[0].pind} age={this.state.theirName[0].age}> </New> 
    <Old  name={this.state.theirName[1].name} pind={this.state.theirName[1].pind} age={this.state.theirName[1].age}></Old>
    </div>
      );
    }

  return (
    <div className="App">
    <h1>Click on this to show content</h1>
    <button onClick={this.togglePersonHandler} >switch</button>
    <persons />
   </div>
  );
}
}