Question

当我单击导航栏时，我有一个导航栏，我将状态设置为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} />

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}/>
           )
   })()}

Answer 1

这个答案可能超出您的要求，但是在这里：

在此示例中，您具有三种状态：burgerClicked（在Navbar.js中，open（在App.js中）和showSideNav（在{{1 }}。

这三个人似乎都在跟踪同一件事：“侧面导航是否打开？”。您不想要那样，应该只使用一个组件来跟踪它。

根据您的示例，我会说只有header.js应该具有该状态，并将其值传递给App.js和Navbar作为道具。

在header中，Navbar.js仅需要调用onClick函数，无需传递任何参数。然后，clicked找出是将App.js设置为open还是true（这很可能意味着切换它）。

一旦false更新其状态，它将把更新后的值传递给App.js和header，这就是React的优点。

Answer 2

您的问题有点难以理解，只能弄清楚您要使用条件渲染。阅读此https://reactjs.org/docs/conditional-rendering.html
希望它能对您有所帮助：）

异步更新时如何传递状态属性作为道具来显示和隐藏组件

2 个答案: