Javascript 如何在基于React函数的组件中动态显示人员

我使用函数组件而不是基于类的组件。因此，我希望在单击按钮时动态显示人员数据

const App = props =>{
   const [showPersons, setShowPersons] = useState({
        showPersons : false,
   })
   const togglePersonsHandler = () => {
        let temp = showPersons.showPersons;
        setShowPersons({showPersons : !temp});
   }

没有

render（）

方法。因此，基于函数的组件未呈现

if

条件

    let persons = null;
    if(showPersons.showPersons){
      persons = (
       <div>
          <Person name={personsState.persons[0].name} location={personsState.persons[0].location} />
          <Person name={personsState.persons[1].name} location={personsState.persons[1].location} 
            click={() => swichNameHandler('Nagi')} changed={nameChangeHandler}>his job is internet business
          </Person>
          <Person name={personsState.persons[2].name} location={personsState.persons[2].location}/>   
      </div>
    )
  }
  return(
    <div className="App">
        <h1>Hello there, this is nagasai </h1>
        <button style={inlineStyles} 
        onClick={togglePersonsHandler}>Toggle Persons
        </button>
        {person}
    </div>
  )
}
export default App;

让persons=null；
if（showPersons.showPersons）{
人员=(
swichNameHandler（'Nagi'）}changed={nameChangeHandler}>他的工作是互联网业务
)
}
返回(
你好，我是长崎
切换人
{个人}
)
}
导出默认应用程序；

有人能帮我吗。

使用公正的条件

{showPersons.showPersons&&
}

您的

useState

默认值应该是

false

，而不是使用对象。您还有一个输入错误：

person

和

persons

@jmargolisvt收到了，谢谢……）