时间戳

首页 > 解决方案 > 当我的本地存储不为空时，如何直接呈现我的菜单？

reactjs - 当我的本地存储不为空时，如何直接呈现我的菜单？

问题描述

当我在我的 localStorage 上放一些东西时，我想直接渲染我的菜单。

基本上，当我的本地存储中没有任何内容时，我的渲染不会出现。当我有东西正在重新渲染但我必须实现我的页面。

如何通过重定向直接获得组合菜单？

function App() {
  const [login, setLogin] = useState(false);

  let logged = localStorage.getItem("connexion");

  const showNav = () => {
    if (localStorage.getItem("connexion") != null) {
      return <Menu />;
    } else {
      return <div></div>;
    }
  };

  useEffect(() => {
    showNav();
    if (localStorage.getItem("connexion") != null) {
      setLogin(true);
    }
  }, [login]);

  return (
    <Router>
      <div>
        {showNav()}
        <Switch>
          <Route path="/contact" component={MeContacter} />
          <Route path="/Home" component={Home} />
          <Route path="/" component={Connexion} />
        </Switch>
        <Footer />
      </div>
    </Router>
  );
}

export default App;

标签： reactjs

解决方案

您可以在对象上设置storage事件处理程序：window

首先定义一个控制菜单是否显示的状态：

const [isMenuShowing,setMenuShowing]=useState(false)

现在在 useEffect 中，添加事件侦听器以isMenuShowing在修改 localStorage 时更改：

useEffect(()=>{

    const storageEventHandler=()=>{
             if (localStorage.getItem("connexion") != null) {
             setMenuShowing(true)
         }}


       window.addEventListener("storage",storageEventHandler)

return ()=>{window.removeEventListener(storageEventHandler)}},[])

最后 ：

 return (
<Router>
  <div>
    {isMenuShowing && <Menu/>}
    <Switch>
      <Route path="/contact" component={MeContacter} />
      <Route path="/Home" component={Home} />
      <Route path="/" component={Connexion} />
    </Switch>
    <Footer />
  </div>
</Router>
  );

重要的！根据 MDN 文档，只要对 localStorage 的更改来自另一个窗口，就会触发此事件，但我在 chrome 上对其进行了测试，如果修改也在同一个窗口上，它实际上可以工作。

推荐阅读