Javascript 在react中切换按钮时无法查看数据。无误

单击切换按钮时无法加载人员组件。在控制台中未找到任何错误

下面的代码有什么错误

加载时无需显示人员组件。单击切换按钮后，我需要显示person组件以及状态对象persons数组中存在的动态内容

import React, { Component } from "react";
import Person from "./Person";
class App extends Component {
 state = {
   showPerson: false,
    persons: [
    { id: 1, name: "this is person1", age: 21 },
    { id: 2, name: "this is person2", age: 22 },
    { id: 3, name: "this is person3", age: 23 }
   ]
 };

 togglePersons = () => {
   const doesShow = this.state.showPerson;
   this.setState({ showPerson: !doesShow });
  };

 render() {
  let persons = null;

   if (this.state.showPerson) {
    persons = (
     <div>
      {this.state.persons.map((person, index) => {
        <Person key={person.id} name={person.name} age={person.age} />;
      })}
     </div>
    );
   }

   return (
     <div>
       <h3>This is working</h3>
       <button type="button" onClick={this.togglePersons}>
       Toggle Persons
       </button>
      {persons}
   </div>
   );
  }
 }

export default App;

import React，{Component}来自“React”；
从“/”导入人员；
类应用程序扩展组件{
状态={
表演者:错,，
人员：[
{id:1，姓名：“这是person1”，年龄：21}，
{id:2，姓名：“这是person2”，年龄：22}，
{id:3，姓名：“这是person3”，年龄：23}
]
};
togglePersons=（）=>{
const doesShow=this.state.showPerson；
this.setState（{showPerson:！doesShow}）；
};
render（）{
让persons=null；
if（this.state.showPerson）{
人员=(
{this.state.persons.map（（person，index）=>{
;
})}
);
}
返回(
这是有效的
切换人
{个人}
);
}
}
导出默认应用程序；

Person组件只是显示道具对象中存在的数据，例如：

类应用程序扩展了React.Component{
状态={
表演者:错,，
人员：[
{id:1，姓名：“这是person1”，年龄：21}，
{id:2，姓名：“这是person2”，年龄：22}，
{id:3，姓名：“这是person3”，年龄：23}
]
};
togglePersons=（）=>{
const doesShow=this.state.showPerson；
this.setState（{showPerson:！doesShow}）；
};
render（）{
const{showPerson，persons}=this.state//解构您的状态以提高可读性
返回(
这是有效的
切换人
{showPerson&&persons.map（{id，name，age}）=>
{name}:{age}
）}
);
}
}
ReactDOM.render（，document.getElementById（'root'））

---

代码的问题是您没有在地图中返回Person组件，因此需要在Person组件之前添加return

但我建议您尽可能保持渲染的干净。在渲染内部执行的任何操作都可以直接实现，如下所示

尝试下面的渲染代码

     render() {
       return (
           <div>
              <h3>This is working</h3>
             <button type="button" onClick={this.togglePersons}>
              Toggle Persons
              </button>
             {this.state.showPerson && this.state.persons.map((person, index) => (
                 <Person key={person.id} name={person.name} age={person.age} />;
             ))}
            );
           }

render（）{
返回(
这是有效的
切换人
{this.state.showPerson&&this.state.persons.map（（person，index）=>(
;
))}
);
}

好的，这里的实际问题是您没有从

map（）

调用返回

组件：

 {this.state.persons.map((person, index) => {
     <Person key={person.id} name={person.name} age={person.age} />;
 })}

{this.state.persons.map（（person，index）=>{
;
})}

两者都需要

 {this.state.persons.map((person, index) => {
     return <Person key={person.id} name={person.name} age={person.age} />; // <- add "return"
 })}

{this.state.persons.map（（person，index）=>{
return；//（//如果它解决了您的问题，请接受并投票
 {this.state.persons.map((person, index) => ( // <- parentheses
     <Person key={person.id} name={person.name} age={person.age} /> // <- no semicolon or "return"
 ))}