时间戳

首页 > 解决方案 > 强制状态保持布尔值

javascript - 强制状态保持布尔值

问题描述

我有一个横幅，它的可见性由真假状态决定。我有一个带有 clickHandler 的关闭按钮，用于将状态设置为 false，从而隐藏横幅。当我导航到不同的页面时，状态重置为 true，因此横幅可见。

即使页面刷新或更改，如何强制状态保持为假？基本上，如果用户关闭它，我希望横幅不再出现。

注意： Banner 组件是一个 Layout 组件，被所有页面使用。

const BannerWrapper = styled.div`
  visibility: ${props => (props.show ? "visible" : "hidden")};
`

const CloseIcon = styled.div`
  position: absolute;
  cursor: pointer;
`

const Banner = () => {
  const [show, setShow] = useState(true)

  const handleClick = () => {
    setShow(false)
  }

  return (
    <BannerWrapper show={show}>
      Some Banner Content
       <CloseIcon onClick={handleClick}>
        X
      </CloseIcon>
    </BannerWrapper>
  )
}

export default Banner

标签： javascriptreactjsreact-hooks

解决方案

您可以将状态保存到 localStorage。使用状态初始化函数读取组件挂载时的状态，并使用useEffect挂钩将状态更新保存/保持到存储中。

const Banner = () => {
  const [show, setShow] = useState(() => {
    const showBanner = localStorage.getItem('showBanner');
    // if showBanner null/undefined fallback to true
    return JSON.parse(showBanner) ?? true;
  });

  React.useEffect(() => {
    localStorage.setItem('showBanner', JSON.stringify(show));
  }, [show]);

  const handleClick = () => {
    setShow(false);
  };

  return (
    <BannerWrapper show={show}>
      Some Banner Content
       <CloseIcon onClick={handleClick}>
        X
      </CloseIcon>
    </BannerWrapper>
  );
}

编辑 force-state-to-maintain-boolean-value

更新 - “重置”并显示横幅。

如果您想/需要重新设置以再次显示横幅，那么我相信以下任何一项都可以解决问题：

  • 从 localStorage 中删除它：localStorage.removeItem('showBanner');
  • 设置为真：localStorage.setItem('showBanner', JSON.stringify(true));
  • 将其设置为空：localStorage.setItem('showBanner', null);

IMO 从 localStorage 中删除它是最干净的选择。

show您还可以在本地更新 OFC状态：

const enableBanner = () => setShow(true);

这将更新状态并触发效果以保持更新的状态值。

推荐阅读