我正在嘗試將應用程式從 React 移動到 Next
在 React 中，此代碼沒有錯誤
let [authTokens, setAuthTokens] = useState(() => localStorage.getItem('authTokens') ? JSON.parse(localStorage.getItem('authTokens')) : null)
let [user, setUser] = useState(()=> localStorage.getItem('authTokens') ? jwt_decode(localStorage.getItem('authTokens')) : null)
但是當我嘗試在 Next 中使用它時，出現錯誤
我認為這是因為 Next 首先在服務器端渲染，而服務器端沒有本地存盤。
這是設定本地存盤的功能。
let loginUser = async (e) => {
e.preventDefault();
let response = await fetch('http://127.0.0.1:8000/api/token/', {
method:'POST',
headers:{
'Content-Type': 'application/json'
},
body:JSON.stringify({'email':e.target.username.value, 'password':e.target.password.value})
})
let data = await response.json()
console.log(data)
console.log(data.access)
if(response.status == 200) {
setAuthTokens(data)
setUser(jwt_decode(data.access))
localStorage.setItem('authTokens', JSON.stringify(data))
router.push('/')
} else {
alert('something went wrong')
}
}
uj5u.com熱心網友回復：
你可以使用這個代碼
if (typeof window !== "undefined") {
if(response.status == 200) {
setAuthTokens(data)
setUser(jwt_decode(data.access))
localStorage.setItem('authTokens', JSON.stringify(data))
router.push('/')
} else {
alert('something went wrong')
}
}
uj5u.com熱心網友回復：
當您的應用程式在服務器上呈現時，那里沒有browserAPI。您需要做的是localStorage僅在瀏覽器中呈現應用程式時訪問。您可以通過等待組件被掛載然后訪問localStorage
function MyComponent(){
// this runs only in the browser
useEffect(()=>{
// access local storage here
},[])
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/368348.html