在条件语句中使用会话存储答案

【问题标题】：Using session storage in a conditional statement在条件语句中使用会话存储
【发布时间】：2021-05-25 22:45:19
【问题描述】：

在我的 React 应用程序的会话存储 websiteData 对象中，我尝试访问以下值：

websiteData:
conf: type1,
 configuration: 
    linkBackSite: "https://www.webste.com/somePath/"

我创建了一个函数，它应该首先查找会话存储项conf，如果该项匹配，则从配置中返回 URL 字符串。

之后，我将函数传递给按钮的 onClick 事件，该事件会将用户返回到相对 URL：

  const returnToEnv = () => {
    const getConfiguration = sessionStorage.getItem('conf');
    console.log('getConfiguration', getConfiguration);
    if (getConfiguration === 'type1') {
      return JSON.parse(
        sessionStorage.getItem('configuration', 'linkBackSite')
      );
    } else {
      console.log('no');
    }
  };


      <button className="active" onClick={returnToEnv}>
        {i18next.t('CONFIRMATION.return')}
      </button>

当我单击按钮时，什么都没有发生，控制台日志返回 null。在 sessionStorage 对象中访问这些项目并在 onClick 事件中使用返回的对象的正确方法是什么？

【问题讨论】：

您直接执行函数returnToEnv，而不是将其分配为事件处理程序。所以函数被执行并且函数的结果被分配给onClick。所以分配解析为onClick=undefined，它什么都不做。试试这个：onClick={returnToEnv}
@Ogod 谢谢。我真的把它放在了意外。控制台日志仍然从条件语句中返回“否”。

标签： javascript reactjs session-storage

【解决方案1】：

了解配置后解决方案就简单了：

  const websiteData = JSON.parse(
    sessionStorage.getItem('websiteData')
  );

  const linkBackSite = websiteData.configuration.linkBackSite;

      <a href={linkBackSite} alt="">
          {i18next.t('CONFIRMATION.return')}
        </a>

调用const websiteData中的主对象后，我返回了const linkBackSite中的具体key。

由于它指向一个预配置的公共 URL，我删除了 onClick 事件并将其直接放在 HTML 锚元素中。

【讨论】：