我正在使用帶有 FastAPI 的 python 撰寫的 api 撰寫一個反應應用程式。
這就是我的代碼的樣子：
export default function Menu() {
const [abstracts, setAbstracts] = useState<Array<string>>([])
const [abstractsId, setId] = useState<string>("")
const [entities, setEntities] = useState<any>([])
const [showMore, setShowMore] = useState<boolean>(false)
const location = useLocation()
const navigate = useNavigate();
const fetchAbstracts = async () => {
const response = await fetch("http://localhost:8000/data")
const data = await response.json()
setAbstracts(data.abstracts)
setEntities(data.entities)
setId(data._id)
}
const saveAbstracts = async () => {
await fetchAbstracts()
entities[location.state.id] = location.state.entities
await fetch(`http://localhost:8000/data/${abstractsId}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ 'entities': entities })
})
}
useEffect(() => {
if (location.state.path == "/annotate") {
saveAbstracts()
} else {
fetchAbstracts()
}
}, [])
我的問題是當我嘗試將資料發送到 api 時，使用 saveAbstracts 函式abstractsId是空的，所以我收到以下錯誤：
我該如何解決這個問題？謝謝。
uj5u.com熱心網友回復：
ractjs 中的事情setState是它們是異步的。因此，當您呼叫它的await fetchAbstracts()內部時，saveAbstracts它會獲取資料然后呼叫setAbstracts并且組件會更新，但是該函式的背景關系沒有改變，因此 newabstracts將無法使用。一個非常簡單的解決方案可能只是從fetchAbstracts函式中回傳資料，如下所示：
const fetchAbstracts = async () => {
const response = await fetch("http://localhost:8000/data")
const data = await response.json()
setAbstracts(data.abstracts)
setEntities(data.entities)
setId(data._id)
return data;
}
const saveAbstracts = async () => {
const data = await fetchAbstracts()
....
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/523579.html
標籤：反应打字稿异步异步等待