当我没有登录时，我怎样才能使我的作曲家菜单消失？

Question

我想让消失我的菜单当我的localStorage不是空的。目前它是这样工作的，但我没有使用我的useEffect，所以我的应用程序不会直接重新渲染。

我应该在我的UseEffect上放什么来让我的页面直接重新渲染?谢谢你

function App() {

useEffect(() => {
localStorage.getItem("connexion");
});
return (
<Router>
<div>
{localStorage.getItem("connexion") != null ? <Menu /> : <div></div>}
<Switch>
<Route path="/contact" component={MeContacter} />
<Route path="/Home" component={Home} />
<Route path="/" component={Connexion} />
</Switch>
<Footer />
</div>
</Router>
);
}
export default App;

Answer 1

LocalStorage不是活动的，所以当它发生变化时不会触发渲染器。你可以在组件挂载时使用useEffect钩子从本地存储读取数据并设置一些本地状态，但由于这是技术上派生的状态(，而且locatstorage不会触发渲染)，所以你应该在每次渲染App时检查localStorage。

function App() {
const showNav = !!localStorage.getItem("connexion");
return (
<Router>
<div>
{showNav && <Menu />}
<Switch>
<Route path="/contact" component={MeContacter} />
<Route path="/Home" component={Home} />
<Route path="/" component={Connexion} />
</Switch>
<Footer />
</div>
</Router>
);
}

您可以设置一些localStorage轮询到"listen"对于更新。

function App() {
const [showNav, setShowNav] = React.useState(
() => !!localStorage.getItem("connexion")
);
React.useEffect(() => {
const timer = setInterval(() => {
setShowNav(!!localStorage.getItem("connexion"));
}, 5000);
return () =< clearInterval(timer);
}, []);
return (
<Router>
<div>
{showNav && <Menu />}
<Switch>
<Route path="/contact" component={MeContacter} />
<Route path="/Home" component={Home} />
<Route path="/" component={Connexion} />
</Switch>
<Footer />
</div>
</Router>
);
}