The editor is showing
Type 'Promise' is not assignable to type 'void | Destructor'.
for the checkUserLoggedIn() call in useEffect.
I can get rid of it by doing const checkUserLoggedIn:any
However maybe that's not the most ideal way of solving this...
If I do const checkUserLoggedIn:Promise I then get a different error:
This expression is not callable. Type 'Promise' has no call signatures.
which is not what I want...I want it to be callable...I'm translating/converting my javascript file to typescript.....
useEffect(() => checkUserLoggedIn(), [])
// Check if user is logged in
const checkUserLoggedIn = async () => {
console.log('checkUserLoggedIn')
const res = await fetch(`${NEXT_URL}/api/user`)
const data = await res.json()
if (res.ok) {
setUser(data.user)
console.log('data.user', data.user)
router.push('/account/dashboard')
} else {
setUser(null)
}
}
Arrow functions written in the way you've described implicitly return the value from the function. For example, this function () => 4 returns the value 4. Conversely, when you wrap this in a block, you must explicitly define the return value: () => { 4; } this function does not return anything.
In your case, you are passing an anonymous arrow function that implicitly returns the result of an asynchronous function, which is a promise.
To fix this, wrap the content of the function you pass to useEffect in a block:
useEffect(() => {
checkUserLoggedIn();
}, []);
useEffect(() => {
checkUserLoggedIn()
}, [])
// Check if user is logged in
const checkUserLoggedIn:() => Promise<void> = async () => {
console.log('checkUserLoggedIn')
const res = await fetch(`${NEXT_URL}/api/user`)
const data = await res.json()
if (res.ok) {
setUser(data.user)
console.log('data.user', data.user)
router.push('/account/dashboard')
} else {
setUser(null)
}
}