在反应中使用本地存储的问题

Question

我正在尝试使用代码创建登录页面以做出反应->

登录.js

 axios.get(apiUrl)  
                .then((result) => {  
                    
                    //console.log(result.data);  

                    if (result.data.status === 200)  {
                        // transfer to dashboard page
                        localStorage.setItem('isLoggedIn', true);

                        alert(result.data.message);

                        return navigate("/dashboard");
                    }
                    else 
                    {
                        
                        alert(result.data.message);
                        return navigate("/login");
                    }
                }
                )

现在这将在本地存储中添加一个键值对。

现在对于我的仪表板页面，我正在使用来自'responsive-navbar-react'

这是代码->

const NavbarDashboard = () => {
  const props = {
    items: [
      {
        text: 'Profile',
        link: '/dashboard'
      },
      {
        text: 'Logout',
        link: '/',
      }
    ],
    logo: {
      text: 'logo',
      link: '/dashboard'
    },
    style: {
      barStyles: {
        background: '#444',
        fontFamily: "'Lato', sans-serif",
      },
      sidebarStyles: {
        background: '#222',
        buttonColor: 'white'
      }
    }
  }
  return <Navbar {...props} />
}

export default NavbarDashboard;

这很好用。 该值在本地存储中设置。 但是当我尝试使用以下代码时->

{
            text: 'Logout',
            link: '/',
onclick: localStorage.removeItem("isLoggedIn")
          }

当我尝试登录时，该值未在本地存储中设置。

我想在按钮单击时添加注销功能。 有人可以帮忙吗？

Answer 1

{
  text: 'Logout',
  link: '/',
  onclick: localStorage.removeItem("isLoggedIn")
}

在此代码中localStorage.removeItem("isLoggedIn")被立即调用

您需要创建匿名 function 来包装localStorage.removeItem("isLoggedIn")

{
  text: 'Logout',
  link: '/',
  onclick: () => localStorage.removeItem("isLoggedIn")
}