Javascript 第一次尝试时未更新React setState

我必须在同一类组件上有条件地显示一个div。但状态更改仅在第二次单击时更新

这是我的密码

 constructor(props) {
    super(props);
    this.state = {
        openSignIn: false
    };
    this.handleOpenSignIn = this.handleOpenSignIn.bind(this);
}

设定状态

    handleOpenSignIn() {
       this.setState({ openSignIn: true });
    }

如果“openSignIn”为真，我必须显示一个元素

<button className="nav-link px-4 border rounded-sm whiteBtn" onClick={() => this.handleOpenSignIn()}>Login</button>

{this.state.openSignIn &&
    <div>Show</div>
}

this.handleOpenSignIn（）}>Login
{this.state.openSignIn&&
显示
}

显示的div仅在按钮上单击两次。 我是新来的

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
openSignIn:错
};
this.handleOpenSignIn=this.handleOpenSignIn.bind（this）；
}
手足印（）{
这是我的国家({
真的吗
});
}
render（）{
返回(
this.handleOpenSignIn（）}
>
登录
{this.state.openSignIn&&Show}
);
}
}
ReactDOM.render（，document.getElementById（'root'））

从“React”导入React；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
openSignIn:错
};
this.handleOpenSignIn=this.handleOpenSignIn.bind（this）；
}
手足印（）{
this.setState（prevState=>({
openSignIn:！prevState.openSignIn
}));
}
render（）{
返回(
this.handleOpenSignIn（）}
>
登录
{this.state.openSignIn&&Show}
);
}
}

如果你想切换而不是仅仅显示，你可以使用上面的代码。 您不应该像在代码段中那样更改布尔状态。

从“React”导入React；
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
openSignIn:错
};
this.handleOpenSignIn=this.handleOpenSignIn.bind（this）；
}
手足印（）{
this.setState（prevState=>({
openSignIn:！prevState.openSignIn
}));
}
render（）{
返回(
this.handleOpenSignIn（）}
>
登录
{this.state.openSignIn&&Show}
);
}
}

如果你想切换而不是仅仅显示，你可以使用上面的代码。 您不应该像在代码段中那样更改布尔状态。

但它确实有效

但它确实有效

---

---

不确定你在问什么？请解释一下，你能提供一个相同的代码沙盒链接吗？@JobRajan我已经将你的代码转换成了一个片段，它可以正常工作。请尝试使用实际演示该问题的代码段提供。对我来说，它也在第一次单击中工作。感谢您的回复和支持。现在它工作正常了，问题是，有条件加载div是一个引导模式，因此第一次单击handleOpenSignIn时该模式不会显示。它只有在第二次点击时才会出现。现在我更改了条件“{this.state.openSignIn&&”到modal的内部内容。然后开始工作。抱歉我的错误。我刚刚开始React js，它是React js中我的第一个项目。不确定你在问什么？请解释一个比特你能提供一个相同的代码沙盒链接吗？@JobRajan我已经将你的代码转换为一个代码段，并按原样工作。请尝试使用实际演示了这个问题。对我来说，它也在第一次单击中工作。感谢您的回复和支持。现在它工作正常。问题是，有条件加载div是一个引导模式，因此该模式在第一次单击handleOpenSignIn时不显示。它只有在第二次单击时才会显示。现在我更改了条件“{St.St.OpenSigin & &“to MultMyCal含量”，然后工作。很抱歉我的错误。我刚刚开始对JS及其第一个项目进行反应JS。您的代码引入了完全不同的行为。这与“反应式SESTATE不在第一次尝试时更新”有关吗？请考虑“HooLouOpenSin”的名称。听起来它应该打开一些东西，而不是切换一些东西。@YuryTarabanko，正如您在我的代码中看到的，状态在第一次单击时就得到更新。

handleOpenSignIn

是问这个问题的人给出的。我只是说明了一种更好的使用他的代码片段的方法。它不是更好。它是不同的。他的代码也可以按原样工作。T他在别的地方出了问题。@YuryTarabanko他的代码是有效的。没错。但如果是这样的话，那么问题出在哪里？另外，你能解释一下我能做些什么来改进我的代码吗？你的代码很好。它本身没有问题。它只是实现了一个不同的用例。OP的代码“打开”了你的——“切换”与此无关，您的代码引入了完全不同的行为。这与“第一次尝试时的反应式SETSTATE不更新”有关吗？请考虑“HealOpenOpenSin”的名称。听起来它应该打开一些东西，而不是切换一些东西。@YuryTarabanko，正如您在我的代码中看到的，状态在第一次单击时就得到更新。

handleOpenSignIn

是问这个问题的人给出的。我只是说明了一种更好的使用他的代码片段的方法。它不是更好。它是不同的。他的代码也可以按原样工作。T他在别的地方出了问题。@YuryTarabanko他的代码是有效的。没错。但如果是这样的话，那么问题出在哪里？另外，你能解释一下我能做些什么来改进我的代码吗？你的代码很好。它本身没有问题。它只是实现了一个不同的用例。OP的代码“打开”了你的——“切换”：）因此与问题无关。

import React from 'react';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      openSignIn: false
    };
    this.handleOpenSignIn = this.handleOpenSignIn.bind(this);
  }

  handleOpenSignIn() {
    this.setState(prevState => ({
      openSignIn: !prevState.openSignIn
    }));
  }

  render() {
    return (
      <div>
        <button
          className="nav-link px-4 border rounded-sm whiteBtn"
          onClick={() => this.handleOpenSignIn()}
        >
          Login
        </button>
        {this.state.openSignIn && <div>Show</div>}
      </div>
    );
  }
}