localstorage不持续

Question

我一直在努力将我的令牌持续到localstorage中，但是每当我引用页面时，该值都会变成未定义的。

这是我的代码来自app.tsx。我在项目中使用Redux，但使用Redux持续存在很多类型错误。这就是为什么我要去本地存储。

  const [isLoggedIn, setIsLoggedIn] = useState('');
  // @ts-ignore
  const user = useAppSelector(state=>state.user.currentUser.token);
  useEffect(()=>{
    const getToken = localStorage.getItem("token");
    if(getToken){
      setIsLoggedIn(getToken)
    }
  },[])

  useEffect(()=>{
    localStorage.setItem("token", user)
  },[user])

对于额外的参考，到目前为止，我已经尝试了我所知道的所有路线

        <Route path="/userProfile" element={<UserProfile />} />
        <Route path="/login" element={user ? <Navigate to="/" /> : <Login />} />
        <Route path="/cart" element={<Cart />} />
        <Route path="/" element={<Home />} />
        <Route path="/product/:id" element={<SingleProduct />} />       

，但我仍然无法弄清楚根问题。

Answer 1

检查用户到未定义

user && localStorage.setItem("token", user)

Answer 2

  useEffect(()=>{
    localStorage.setItem("token", user)
  },[user])

您的问题是从上面的使用效果。尽管它具有依赖关系用户（正在收听用户状态更改），但是当您首次渲染组件时，它是调用的。

我建议您在下面的useffect上添加条件

  useEffect(()=>{
    if(user) {
       localStorage.setItem("token", user)
    }
  },[user])

，这将有助于您防止setItem user。