Javascript 如何将state属性作为prop传递以在react中显示和隐藏组件，当它'；s异步更新

我有一个导航栏，当我点击它时，我正在将我的状态设置为true，并将其作为道具传递到我的组件中，但函数需要时间更新它，并且道具作为false发送。当状态更新完成时，我如何发送更新的道具

navbar.js

 constructor(props) {
    super(props);
    this.state = {
      burgerClicked:false,
    };
  }
 burgerClicked=()=>{
    this.setState({ burgerClicked: true },()=>{   this.props.clicked(this.state.burgerClicked)})
  }

app.js

 constructor(props){
    super(props);
     this.state={
      open:false,
     }
  }

 openSideNav =(burgerClicked)=>{// the time is taking here to update it send open as false 
     this.setState({open:burgerClicked},()=>{
       console.log(this.state.open)
     });

 <Navbar clicked={this.openSideNav} tokenRequested={this.request}/>
 <Header  open={this.state.open} />

构造函数（道具）{
超级（道具）；
这个州={
开：错，
}
}
openSideNav=（burgerClicked）=>{//此处更新它所需的时间send open as false
this.setState（{open:burgerClicked}，（）=>{
console.log（this.state.open）
});

header.js

constructor(props) {
    super(props);
    this.state = { showSideNav: false };
  }


UNSAFE_componentWillReceiveProps(){
    // 
    console.log(this.props.open,this.state.showSideNav);//this.props.open is false

    if (this.props.open) {
      this.setState({showSideNav:this.props.open},()=>{
        console.log(this.state.showSideNav); //this.state.showSideNav dont print on first click but print true on second click on burger

      })
    }

    console.log(this.props.open,this.state.showSideNav); //this.props.open is false
  }

   {(() => {
  if (!this.state.showSideNav) {
         return null;
        }
          return(
          <SideNavbar closeNav={this.closeSideNav}/>
           )
   })()}

构造函数（道具）{
超级（道具）；
this.state={showSideNav:false}；
}
不安全组件将接收道具（）{
// 
console.log（this.props.open，this.state.showSideNav）；//this.props.open为false
如果（此.props.open）{
this.setState（{showSideNav:this.props.open}，（）=>{
console.log（this.state.showSideNav）；//this.state.showSideNav不在第一次单击时打印，但在第二次单击burger时打印true
})
}
console.log（this.props.open，this.state.showSideNav）；//this.props.open为false
}
{(() => {
如果（！this.state.showSideNav）{
返回null；
}
返回(
)
})()}

这个答案可能比你想要的要多，但它是这样的：

在本例中，您有三种状态：

Navbar

（在

Navbar.js

中）、

open

（在

App.js

中）和

showSideNav

（在

header.js

中）

看起来这三个都在跟踪同一件事：“侧导航打开了吗？”。如果你不想这样，你应该只有一个组件来跟踪它

根据您的示例，我认为只有

App.js

才应该具有该状态，并将其值作为道具传递给

Navbar

和

标题

在
Navbar.js
中，
onClick
只需调用
单击的
函数，而不传递任何参数。然后，
App.js
确定是否将
打开
设置为
真
或
假
，这很可能仅仅意味着切换它

一旦
App.js
更新了它的状态，它就会将更新后的值传递到
标题和
导航栏，这就是React的妙处。
你的问题有点不可理解，只能知道你想要使用条件渲染。
读一下这个

希望它能帮助你：）
它仍然会异步进行是的，它仍然是异步的，但是React处理异步性（real word？）非常好，这是一个正常的用例。需要保持同步的多个状态不是一个正常的React用例，异步性会很快让事情变得混乱。