我對使用 TS 或 Web 開發的 React 總體上還是很陌生。我一直在努力研究如何設計一個介面以匹配來自 api 呼叫的資料結構。
這是 App.tsx 檔案和 fetch 呼叫的 url "https://datausa.io/api/data?drilldowns=Nation&measures=Population"
import React from 'react';
import './App.css';
interface OuterModel {
data: InnerModel[];
source: object;
}
interface InnerModel {
idNation: string;
nation: string;
idYear: number;
year: string;
population: number;
slugNation: string;
}
function App() {
const url = "https://datausa.io/api/data?drilldowns=Nation&measures=Population";
const [data, setData] = React.useState<InnerModel[]>([]);
function getData(): Promise<InnerModel[]> {
return fetch(url).then(res => res.json()).then(result => (result as OuterModel).data as InnerModel[]);
}
React.useEffect(() => {
getData().then(item => setData(item));
}, [])
return (
<div>
<h1>{data.length}</h1>
<ul>
{data?.map((item, idx) => <li key={idx}>{item.population}</li>)}
</ul>
</div>)
}
export default App;
我想 fetch 呼叫是成功的，因為 h1 顯示了陣列的計數。然而無序串列總是空白的。不知道是什么問題。界面？我使用鉤子的方式？這些在控制臺中沒有錯誤，但這是不對的。
空白串列項
另外，我想知道我是否以正確的方式這樣做。看來我必須先打電話，比如在瀏覽器控制臺中，才能看到回傳的json的結構，然后我可以為其宣告一個介面。我覺得有點別扭。有沒有更好的方法？
感謝您對此的任何幫助。
uj5u.com熱心網友回復：
在API的回應中，population欄位的“P”是大寫的，導致了這個問題。
您的資料已正確加載到記憶體中的一個提示已經出現在您的螢屏截圖中。值data.lengthIS 7。添加到串列已經呈現的事實，但它是空的。（即，回圈邏輯有效并且沒有崩潰）這意味著它無法找到密鑰，并且我推斷您的密鑰中一定存在一些錯誤。
請使用諸如https://transform.tools/json-to-typescript 之類的自動化工具來創建界面，手動執行此操作是正確的，但這些小錯誤發生在我們最好的人身上。??
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/373487.html