强制状态保持布尔值

Question

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

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

注意：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

Answer 1

您可以将状态持久化到 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>
  );
}

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

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

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

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

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

show

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

Answer 2

“如何在页面刷新中保持值”这个问题的答案是：使用本地存储。有一些钩子实现了与 useState 相同类型的接口，但将值存储在本地存储中，而不是在引擎盖下的内存中。 其中之一是 useLocalStorage ( https://usehooks.com/useLocalStorage/ )。