首页 > 解决方案 > renderer() 组件中的状态未更新

问题描述

我对 React JS 很陌生,现在我正在使用它来构建一个应用程序。我有个问题。

在按钮单击事件中,我有一个这样的代码逻辑:

handlestartbutton(event) {
     const accesskey = localStorage.getItem(localStorageKeys.accessTokenKey);
     const decodedAccessKey = jwt_decode(accesskey);
     const date = dateConverter.epochToReadableDate(decodedAccessKey.exp);
     if (date.currentTime < date.expiryDate) {
        this.setState({
         accesstokenexpirydate: true
        }, () => {
          if(this.state.accesstokenexpirydate === false) {
//rest of the code

      }
})

在 renderer() 我有一个这样的弹出 UI:

renderer()
{
{this.state.accesstokenexpirydate === true ? (
      <Popup
      open ={this.state.open}
         closeOnDocumentClick={false}
         closeOnEscape={false}
         onClose={this.closeModal}className
         >
         <div className={popstyles.popupBody}>
        <div className={popstyles.modalClose}>
        <a className="close" onClick={this.closeModal}>
        &times;
        </a>
        {""}
        <div className ={popstyles.unAutherizedUser}>
        <label >{homeConstantMessages.accessTokenExpire}</label>
        <div className ={popstyles.unAutherizedUserMsg}>
        <label>{homeConstantMessages.accessTokenExpireMsg}</label>
        <button className ={styles.refreshaccessbtn} onClick = {this.navigateToHomePage.bind(this)}  label = {homeConstantMessages.refreshbtn}>
         </button>
        </div>
        </div>
       </div>
       </div>
      </Popup>
        ) : (
       ''
     )}
}

问题是当第一次单击开始按钮时,即使状态变量 accesstokenexpirydate 设置为 true,此弹出 UI 也不会弹出。当第二次点击按钮时,UI 会弹出。谁能帮帮我

标签: node.jsreactjselectron

解决方案


1)我认为你必须应用如下箭头功能,然后你可以使用this

handlestartbutton=(event)=> {...}

2)我对这个名字很困惑,你不认为它应该render(...)代替renderer()


推荐阅读