Javascript useState未在reactjs中直接更新

我有一些

div

元素，只显示标题，当我单击它时，它应该显示表单，如果显示表单，它应该关闭它

我尝试了这段代码，但它不起作用，可能是因为

useState

是async所以它没有立即更新

我尝试过使用

useffect

，但我的实现没有成功，下面是一个代码片段：

import React，{useState}来自“React”；
导入“./AdminPageStyle.css”；
常量AdminPage=（）=>{
document.title='管理页面'；
const[addPanel，setAddPanel]=useState（false）；
返回(
你好，管理员！
{/*Navbar*/}
添加新动画
更新现有动画
删除动画
{/*用于添加新动画的面板*/}
setAddPanel（！addPanel）}style={{display:addPanel？'flex'：'none'}>
添加新动画
添加名称
添加gif adress
制作新动画

问题是我试图显示/隐藏标题而不是表单，因此：

<nav className="database-manipualtion_class">
  <div className="add-update-delete_class" id="add-panel_id">Add new animation</div>
  <div className="add-update-delete_class" id="update-panel_id">Update existing animation</div>
  <div className="add-update-delete_class" id="delete-panel_id">Delete animation</div>
</nav>

{/* Panel for adding new animation */}
<div className="add_class" onClick={() => setAddPanel(!addPanel)} style={{display: addPanel ? 'flex': 'none'}}>

添加新动画
更新现有动画
删除动画
{/*用于添加新动画的面板*/}
setAddPanel（！addPanel）}style={{display:addPanel？'flex'：'none'}>

应翻译为：

<nav className="database-manipualtion_class">
  <div onClick={() => setAddPanel(!addPanel)} className="add-update-delete_class" id="add-panel_id">Add new animation</div>
  <div className="add-update-delete_class" id="update-panel_id">Update existing animation</div>
  <div className="add-update-delete_class" id="delete-panel_id">Delete animation</div>
</nav>

{/* Panel for adding new animation */}
<div className="add_class" style={{display: addPanel ? 'flex': 'none'}}>

setAddPanel（！addPanel）}className=“添加-update-delete\u class”id=“添加-panel\u id”>添加新动画
更新现有动画
删除动画
{/*用于添加新动画的面板*/}

addPanel

仅用于显示某些内容，除非单击该内容，否则这些内容将被隐藏。那么，您希望如何使其可见？我解决了这个问题guys@AndrijaGajic张贴你的答案then@EugenSunic给你