我沒有擴展組件類，試圖用來usestate管理狀態?，F在我想在特定條件下將人員組件添加到personList方法內部的變量中togglePersonsHanler。我希望添加一個 HTML 標簽列表，例如<person name="person1" age=31><person name="person2" age=26><person name="person3" age=35>但在控制臺日志上，我得到personList如下{$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: {…}, …}$$typeof: Symbol(react.element)type: "div"key: nullref: nullprops: {children: Array(3)}_owner: null_store: {validated: false}_self: null_source: {fileName: "D:\data\react\my-app\src\App.js", lineNumber: 72, columnNumber: 7}并且人員標簽沒有被添加到 DOM 中，請提供任何建議import React, { useState } from 'react';import './App.css';import Person from './Person/Person';const App = props => {      const [personState, setPersonState] = useState({    persons: [      {name: "person1", age:31},      {name: "person2", age:26},      {name: "person3", age:25}    ],    other: "some Other Value"  } );  const [otherState,setOtherState]=useState({otherState :'some other value'});  const [showPersonsState,setShowPersonsState]=useState({showPersons :false});    let personList=null;    const togglePersonsHanler =() =>{      personList=null;      setShowPersonsState(        {showPersons : !showPersonsState.showPersons}      )      console.log(showPersonsState.showPersons);      if(showPersonsState.showPersons){        personList=(      <div>{personState.persons.map (person =>{        return <person name={person.name} age={person.age}/>      }      )}</div>        );      }      console.log(personList);    }  return (    <div className="App">      <h1> HI, I'm the react app</h1>      <button       //onClick={switchNameHandler.bind(this,'Gopu Ravi')}       onClick={togglePersonsHanler}      style={style}> Toggle Person </button>      { personList }    </div>  );}export default App;