Reactjs 在react.js中迭代组件的Map（）函数？

最近我开始学习react.js，在理解JavaScript中的map（）函数时遇到了问题。我提供了一些代码片段，其中我尝试迭代“person”组件，而我尝试在控制台上输出结果，我刚刚观察到它迭代了两次，但组件在浏览器中仅显示一次[在此处输入图像描述][1]。有人能告诉我为什么它会重复两次吗

//这就是国家

class App extends Component {
  state = {
    persons: [
      {id:'aksjsdk',name:'ABC',age:'26'},
      {id:'aksjajsd',name:'XYZ',age:'25'},
      {id:'aksjadskjd',name:'MNO',age:'27'}
    ],
      showAllPersons: false
  }

  if(this.state.showAllPersons){
    persons = (
    <div>
        {
          this.state.persons.map((person,index) => {
            console.log(person);//printing twice
            return <Person
            name = {person.name}
            age = {person.age} 
            click = {this.deletePersonHandler.bind(this,index)}
            key ={person.id}/>
          })
        }
    </div>)
  }

---

每当组件的道具或状态更新时，组件将重新渲染

由于渲染中有一个

console.log

语句，因此我们可以假设您的组件正在再次渲染。这很可能是由于某些父组件在装载时再次呈现

当父组件重新渲染时，其所有子组件（及其子组件）也会重新渲染

---

当重新渲染发生时，它不会清除控制台，因此会第一次记录控制台值，然后当组件重新渲染时，它会再次记录

每当组件的道具或状态更新时，组件都会重新渲染

由于渲染中有一个

console.log

语句，因此我们可以假设您的组件正在再次渲染。这很可能是由于某些父组件在装载时再次呈现

当父组件重新渲染时，其所有子组件（及其子组件）也会重新渲染

当重新渲染发生时，它不会清除控制台，因此会第一次记录控制台值，然后当组件重新渲染时，它会再次记录

Object { id: "aksjsdk", name: "ABC", age: "26" }
Object { id: "aksjajsd", name: "XYZ", age: "25" }
Object { id: "aksjadskjd", name: "MNO", age: "27" }
Object { id: "aksjsdk", name: "ABC", age: "26" }
Object { id: "aksjajsd", name: "XYZ", age: "25" }
Object { id: "aksjadskjd", name: "MNO", age: "27" }