我做了這樣的事情，當我獲取資料時，我拉出了stackoverflow用戶，當stackoverflow用戶不存在時，我想通過使用useState()
在我的Fetching API中，我寫了這樣的函式
const [isError, setIsError] = useState<boolean> (false)
const [data, setData] = useState<any>([] )
const fetchUser = async () => {
await axios.get("URL"/span>)
.then(userData => {
if (userStats.data.items.length ==0) {
setIsError(true)
console.log("用戶不存在")
}
else {setData（userStats.data.items[0]） }
//Up there I decalre my useState with that fetched API.
})
}
當我在輸入欄位中輸入一些用戶真正不存在的隨機字母時，我檢查我的useState布林值。
如果它是真的，我想回傳我的ErrorPage組件，如果它是假的Success Prop Componenet/p>
if（isError）{
return <ErrorPage /> }
}
return <Success username={data. userName}/>
我在控制臺的日志中得到 -> "User Doesn't Exist"和React錯誤
不能讀取未定義的屬性（讀取'userName'）
我知道userName在資料中不存在，但是當isError為真時，為什么我的if陳述句沒有忽略最后的回傳？
上面的代碼所顯示的是我所做的邏輯
<如果還有什么遺漏，請給我留言，我將編輯它
。uj5u.com熱心網友回復：
你的組件不知道isError的變化。它正在執行，好像它仍然是假的。
useEffect(() => {
if（isError）{
return <ErrorPage />
}
},[isError])。
當然，你必須像這樣從react中匯入useEffect。
import React, { useState, useEffect } from 'react;
uj5u.com熱心網友回復：
好吧，我認為這里的問題是，你正在呼叫一個 "異步 "函式，它不會 "立即 "提供結果，所以當你的代碼來到:
時if（isError）{
return <ErrorPage /> }
}
return <Success username={data. userName}/>
你的變數isError還沒有被設定。
所以基本上它是以isError作為默認值（false）來加載的（如果你想的話，就嘗試將其初始化為true）。
有多種方法可以解決這個問題。例如，你可以加載一個
<Loading>
在異步函式進行時，組件。所以基本上在你的代碼中 :
const [isError, setIsError] = useState<boolean> (false)
const [isLoading, setIsLoading] = useState(true)
const [data, setData] = useState<any>([] )
const fetchUser = async () => {
await axios.get("URL"/span>)
.then(userData => {
if (userStats.data.items.length ==0) {
setIsError(true)
setIsLoading(false)
console.log("用戶不存在")
}
else("用戶不存在")
{
setData(userStats.data.items[0] )
setIsLoading(false)
}
//Up there I decalre my useState with that fetched API。
})
}
并且
if(isLoading)
{
return <Loading/>
}
if（isError）{
}
return <Success username={data. userName}/>
或者你可以像其他答案中建議的那樣使用：useEffect。但我不確定useEffect是否會在async操作之后被執行。你應該試試。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/309498.html
標籤：