我正在嘗試從 API 獲取資料。Fetch 可以很好地獲取資料，這不是問題。我的問題現在只是嘗試從該資料中呈現特定值。由于某種原因，在嘗試渲染組件時資料尚未完全加載到變數中，因此當它嘗試訪問特定值時，會出現錯誤TypeError: Cannot read properties of undefined (reading 'aud')。我不認為這是特定于 React Native 的問題，但一般來說甚至可能是 React.js。
這是我試圖實作的源代碼
export const TestScreen = () => {
const [exRates, setExRates] = useState([]);
const [loading, setLoading] = useState(true)
const loadData = async () => {
const res = await fetch(
"https://api.coingecko.com/api/v3/exchange_rates"
);
const data = await res.json();
console.log("This is the API Call");
setExRates(data);
}
useEffect(() => {
loadData();
}, []);
return (
<View>
<Text>Hello </Text>
{console.log("I am in the return section of the code")}
{console.log(exRates)}
<Text>{exRates.rates.aud}</Text>
</View>
);
};
有趣的是，當我得到它的代碼時，loadData似乎沒有作為該功能的控制臺日志運行，并且似乎沒有記錄我所指示的內容。并且exRates變數沒有資料
所以它似乎是在允許loadData函式運行之前嘗試渲染代碼useEffect。而且它還運行了兩次回傳（我不知道為什么，如果有人可以指導我為什么也會很棒！）
但是當我注釋掉這個<Text>{exRates.rates.aud}</Text>元素時，它似乎運行了這個loadData函式。這是注釋掉時的控制臺。
請注意，在我寫這篇文章時，每次重繪 應用程式時行為都會發生變化。有時它會在兩個控制臺日志中都有費率資料，有時它會出錯，有時它不會。我在這里不知所措。任何幫助將不勝感激。
uj5u.com熱心網友回復：
你可以試試這個：
{exRates?.rates?.aud}
或者
{exRates ? {exRates?.rates?.aud}：空 }
uj5u.com熱心網友回復：
免費計劃受費率限制。當呼叫達到限制時，它會回傳 429 Too Many Requests。
我們的免費 API 的速率限制為每分鐘 10-50 次呼叫，如果您超過該限制，您將被阻止，直到下一個 1 分鐘視窗。請修改您的查詢，以確保在發生這種情況時您不會超出我們的限制。
在使用之前檢查回應是否正常。
if (res.ok) {
const data = await res.json();
setExRates(data);
}
uj5u.com熱心網友回復：
??問題解決了！
這就是您訪問 JSON 回應的方式。
export const TestScreen = () => {
const [exRates, setExRates] = useState(undefined);
const [loading, setLoading] = useState(true);
const loadData = async () => {
const res = await fetch('https://api.coingecko.com/api/v3/exchange_rates');
const data = await res.json();
console.log(`${JSON.stringify(data)}`);
console.log(`${JSON.stringify(data["rates"])}`);
console.log(`${JSON.stringify(data["rates"]["usd"])}`);
console.log('This is the API Call');
setExRates(data);
};
useEffect(() => {
loadData();
}, []);
return (
<View style={styles.container}>
<Text>Hello </Text>
{exRates && <Text>{exRates["rates"]["usd"]["name"]} : {exRates["rates"]["usd"]["value"]}</Text>}
</View>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/521111.html
標籤：反应反应式反应钩子获取 API