如何将解除警报设置为仅显示一次答案

【问题标题】：how to set dismissing alert to show just once如何将解除警报设置为仅显示一次
【发布时间】：2018-04-08 14:10:48
【问题描述】：

我尝试找到在用户第一次进入页面时显示解除警报的方法，然后当用户再次单击该页面时，它就不会再显示该警报了。

我使用这个网站的代码：https://reactstrap.github.io/components/alerts/

我的代码：

    this.state = {

     hasVisitedPageBefore: false,
};

  visitPage() {
this.setState({ hasVisitedPageBefore: true });

 }

showAlert() {
return (
  <Alert color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
    Congratulations! You have been created deck.
  </Alert>
);
  }


 render
{this.state.hasVisitedPageBefore ? null : showAlert}

你们知道怎么查吗？请给我建议。

谢谢

【问题讨论】：

您可以添加某种标识符，例如类，以反映不应显示此警报，并在您以后想再次显示时将其删除。
@ShaharGalukman 我尝试为警报设置状态，但它仍然不起作用。当我点击该页面时，警报仍然出现
你能展示你的代码吗？
“再次点击该页面”是什么意思？您确实希望警报何时消失？
@anand 我的意思是我想在用户第一次使用时显示警报以描述如何使用此功能。第二次，用户只是进入编辑，所以我不希望它在第二次出现警报。

标签： reactjs redux react-router react-redux reactstrap

【解决方案1】：

您可以借助 localstorage 在不同页面之间保留标志

例如。从构造开始

constructor() {
 this.state = {
    hasVisitedPageBefore: localStorage.get("hasVisited") || false,
 };
}

现在在

中设置visited标志

visitPage() {
    localStorage.set("hasVisited", true)
    this.setState({ hasVisitedPageBefore: true });
 }

如果您想在当前浏览会话中保留此首选项，您可以使用sessionStorage。

[这只是一个想法，请原谅我的语法]

【讨论】：

虽然这会解决问题，但在这一点上看起来更重要的是@pppp 了解如何正确使用反应状态。

【解决方案2】：

如果我对您的理解正确，您希望“记住”用户访问过某个页面，以便当用户再次访问时，您必须以不同的方式显示您的页面（即没有警报）。

您需要有一个状态变量hasVisitedPageBefore（或您选择的任何名称！）。启动应用程序时将其设置为默认值false。当页面被访问时，将变量设置为true。

然后在您的页面中，根据hasVisitedPageBefore 是true 还是false，显示或隐藏警报。

    <div>
      {hasVisitedPageBefore?null:<Alert>Message</Alert>}
      <MyPage />
    </div>

如果您无法弄清楚详细信息，请随时询问。

【讨论】：

还是不行，当我回到页面时它直到出现。
你在哪里存储你的状态？如果你将它存储在同一页面上，它会在你离开时被销毁，并在你回来时具有默认值。显示您的一些代码，有人可能会提供帮助。
看到了你的代码。您将状态存储在与页面相同的组件中。当您转到其他页面时，它将丢失。将状态存储在父组件中，并将其作为prop 传递到您的页面。
很高兴能提供帮助。干杯！！ :)