我正在嘗試設定一些取決于用戶是否登錄的 UI 狀態。如果用戶已登錄，則 UI 中的某些狀態應該反映這一點。
我正在使用 SSG 靜態生成頁面和 SWR 來獲取用戶資料。當我呼叫我的 fetcher 函式并嘗試呼叫我的自定義鉤子以檢查用戶是否已登錄時，在初始請求中，用戶未定義，但當我重新加載時，用戶存在。
為什么會這樣？fetcher 函式是否在其他任何事情之前被呼叫，我該如何解決這個問題。
基本上，我想要的只是對[parkCode].js頁面進行 SSG 并獲取一些用戶資料以顯示用戶特定的狀態。
這是我的代碼：
// [parkCode].js
import checkUser from '../../hooks/checkUser'
import useSWR from 'swr'
export default function Park({parkCode})
const user = checkUser()
const fetcher = async () => {
const username = await user?.username
console.log(username)
try {
const {data} = await API.graphql({
query: listSites,
variables: {
filter: {
code: {eq: parkCode},
owner: {eq: username},
},
},
})
return data?.listSites?.items[0] || null
} catch (err) {
console.error('Site not added by user', err)
}
}
const {data, error} = useSWR('park', fetcher)
console.log(data) // logs an error (says
}
我的鉤子來查看用戶是否已登錄
//checkUser.js
import {useState, useEffect} from 'react'
import {Auth, Hub} from 'aws-amplify'
export default function checkUser() {
const [user, setUser] = useState(null)
useEffect(() => {
checkUserAuth()
const unsubscribe = Hub.listen('auth', () => checkUserAuth())
return () => unsubscribe()
}, [])
async function checkUserAuth() {
try {
const signedInUser = await Auth.currentAuthenticatedUser()
setUser(signedInUser)
} catch (err) {
setUser(null)
}
}
return user
}
uj5u.com熱心網友回復：
首次呈現頁面時，user變數仍具有其初始狀態 ( null)，因為checkUser鉤子useEffect尚未運行。這意味著當useSWR('park', fetcher)被呼叫時，user內部的 fetcher 方法也將是null. 為了防止這種行為，您可以僅在設定 時有條件地獲取useSWR呼叫中的資料user。
export default function Park({ parkCode })
const user = checkUser()
const fetcher = async () => {
// No need to call `await` to get `username` here
const username = user?.username
try {
const { data } = await API.graphql({
query: listSites,
variables: {
filter: {
code: { eq: parkCode },
owner: { eq: username },
}
}
})
return data?.listSites?.items[0] || null
} catch (err) {
console.error('Site not added by user', err)
}
}
// Only call the fetcher method if `user` exists
const { data, error } = useSWR(user ? ['park', user?.username] : null, fetcher)
if (data) {
// Handle `data` when it's set
}
// Rest of your component
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/411673.html
標籤：