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

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

您的問題來自上述useEffect 。 雖然它有依賴user （它正在監聽user狀態更改），但它在您第一次渲染組件時被調用。

我建議您應該為該useEffect添加一個條件，如下所示

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

這將幫助您防止使用未定義的user值調用setItem 。

Answer 2

檢查用戶未定義

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