React-仅显示一次消息，具体取决于布尔值

Question

我只需要显示一条消息，这取决于处于redux状态的布尔值。如果布尔值为false，则不应显示该消息。逻辑是：

• 最初的布尔值为假
• 如果boolean为false，则会自动显示一个弹出窗口。弹出窗口调度将boolean设置为true的操作（将其保存到localState）。
• 弹出窗口中有一条消息，如果boolean为false，则会设置该消息

结果是：

• 显示弹出窗口，并分派将boolean设置为true的动作。
• 由于布尔值已更新为true，因此根本不显示该消息。

弹出式代码：

 componentDidMount() {
         //if boolean is false, set it to true
         if(!this.props.popupHasShown) {
              this.props.popupHasShown() 
      }


 //set message if popup have not shown
    var initialMessage = !this.props.popupHasShown ? 'Hello! this is the message' : null;

render(){
    return(
       <div>
           <p>Popup!</p>
           {initialMessage && <p>{initialMessage}</p>}
      </div>
     )
}

您可以手动打开弹出窗口，但在正常情况下不应显示该消息。

所以我不知道如何使该文本在第一时间可见