有一段時間我一直在撞墻。參加 FCC 課程，基本上完成了一個專案，但我自己嘗試使用陣列獲取 JSON，而不是直接放入其中，因為我想學習如何去做……沒想到會這么難！
我想做什么？
我想獲取一個json并將其中的陣列分配給我的反應組件中的狀態。然后，我將使用隨機 num gen 從陣列中選擇要顯示的隨機報價。
我哪里有問題？
我能夠獲取 json 并將引號記錄到控制臺，但是每當我嘗試將它們分配給變數時，我最終都會得到 promise 物件。我認為這是一個我必須誤解/還沒有完全理解異步函式的問題
我需要什么幫助
我創建了一個新的 codepen，與任務分開，我一直在測驗如何在沒有 React 的情況下讓它作業，所以當我知道該怎么做時，我可以將它作業到我的 React 專案中。
當我運行異步函式時，我能夠將陣列中的第一個引號記錄到控制臺，但是當我嘗試使用相同的異步函式將該引號回傳給 myQuote 時，它??會回傳一個 Pending Promise。我是完全正確地接近這個，還是我完全走錯了方向？
如果您不想訪問 codepen 鏈接，請使用以下代碼：
const testFetch = fetch('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json')
.then(response => response.json())
.then((quote) => {
return quote.quotes;
})
// The console.log below logs "The quote is [quote as a string]" to the console
const testVar = async () => {
const quoteArr = await testFetch;
console.log("The quote is ", quoteArr[0].quote);
return quoteArr[0].quote;
};
let myQuote = testVar();
// This logs "Is my quote variable working? [Promise pending]" to the console
console.log("Is my quote variable working? ", myQuote)
uj5u.com熱心網友回復：
react 的一個常見模式（雖然不是最好的模式）是在 useEffect 中呼叫 fetch 并在 .then 中設定狀態。
最簡單的例子是
import React, { useEffect, useState } from "react";
const App = () => {
const [quotes, setQuotes] = useState<any>([]);
useEffect(() => {
fetch(
"https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json"
)
.then((response) => response.json())
.then((quote) => {
setQuotes(quote.quotes);
});
}, [setQuotes]);
return (
<div>
{quotes.length > 0 && quotes.map((quote: any) => <div>{quote.quote}</div>)}
</div>
);
};
export default App;
React 中的一個現代替代方案是使用 ReactQuery 來獲取資料，因為它提供了很好的抽象和開箱即用的快取。
uj5u.com熱心網友回復：
在反應中，您需要在渲染到狀態后加載資料。您不能只在全域范圍內正確獲取和獲取資料。下面的代碼將澄清。
const testFetch = fetch('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json')
.then(response => response.json())
.then((quote) => {
return quote.quotes;
})
const MyComponent = () => {
useEffect(()=>{
testFetch.then(quoteArr => {
console.log('The quote is ', quoteArr[0].quote);
});
},[])
}
uj5u.com熱心網友回復：
此語法等同于 async/await 語法，因為它正在決議 Promise。兩者都使用是多余的。
const testFetch = fetch('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json')
.then(response => response.json())
.then((quote) => {
return quote.quotes;
})
你可以試試這樣的
// you must also use react state to save your data
const [state, setState] = useState()
const testFetch = async () => {
// with this syntax you need to wrap it in a try/catch to catch your errors
try {
// res here is equivalent to [response] above
const res = await fetch('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json')
console.log(res)
return res
} catch (err) {
console.log(err)
return
}
}
// and called upon component mount using useeffect
useEffect(() => {
const testVar = testFetch()
setState(testVar)
}, [])
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/522587.html