Javascript 强制状态保持布尔值

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

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

注意：横幅组件用于所有页面使用的布局组件

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

const BannerWrapper=styled.div`
可见性：${props=>（props.show？“可见”：“隐藏”）}；
`
const CloseIcon=styled.div`
位置：绝对位置；
光标：指针；
`
常量横幅=（）=>{
const[show，setShow]=useState（true）
常量handleClick=（）=>{
设置显示（假）
}
返回(
一些横幅内容
X
)
}
导出默认横幅

关于“如何在页面刷新期间保持值”的问题的答案是：使用本地存储。有一些钩子实现了与

useState

相同的接口，但将值存储在本地存储器中，而不是存储在引擎盖下的内存中。

---

其中一个是

useLocalStorage

（）。

关于“如何在页面刷新期间保持值”的问题的答案是：使用本地存储。有一些钩子实现了与

useState

相同的接口，但将值存储在本地存储器中，而不是存储在引擎盖下的内存中。

---

其中之一是

useLocalStorage

（）。

您可以将状态持久化到localStorage。使用状态初始值设定项函数读取组件装载时的状态，并使用

useffect

hook将状态更新保存/持久保存到存储器

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。使用状态初始值设定项函数读取组件装载时的状态，并使用

useffect

hook将状态更新保存/持久保存到存储器

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>
  );
}

---

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

此横幅应仅出现在特定路由中？您必须在父元素（如app.js）中管理状态。因为每次呈现此组件的页面时，默认值都将为true。此横幅应仅出现在特定路由中？您必须管理父元素（如app.js）中的状态。因为每次呈现此组件的页面时，默认值都将为true。我认为OP希望首先打开横幅…我认为您应该从localStorage读取值作为

useState

的初始值（如果未定义），您还可以将first

useffect

的逻辑放在

useState

中，但这取决于你：）@gmoniava是的，打得很好，在你第二次发表评论的时候就这么做了我喜欢这个想法，但它似乎不起作用。我确实在本地存储中看到，

showBanner

启动为

true

，关闭后，它变为

false

，并保持

false

值，但横幅仍然显示出来？@EricNguyen我认为这与纯布尔值无关，但是，进入本地存储的值仍然需要JSON序列化。我更新了我的答案，包括一个运行的代码沙盒。很抱歉出现任何混乱和延迟。我认为OP希望首先打开横幅…我认为您应该从localStorage读取值作为

useState

的初始值（如果未定义），您也可以将第一个

useEffect

的逻辑放在

useState

中，但这取决于您：）@gmoniva好的，很好的呼吁，当你发表第二条评论时，他正在这样做。：）我喜欢这个想法，但它似乎不起作用。我确实在本地存储中看到，

showBanner

启动为

true

，关闭后，它变为

false

，并保持

false

值，但横幅仍然显示出来？@EricNguyen我认为这与纯布尔值无关，但是，进入本地存储的值仍然需要JSON序列化。我更新了我的答案，包括一个运行的代码沙盒。对不起，有任何混乱和延误。