import React, {useState, useEffect} from "react";
import './App.css';
function App() {
const [ data, setData ] = useState([]);
useEffect( ()=> {
loadData();
//getData();
}, []);
const loadData = async () => {
await fetch("https://randomuser.me/api")
.then(response => response.json())
.then(receiveddata => setData(receiveddata));
}
console.log(data);
return (
<div className="App">
<p> Fetch/ Async/ Await</p>
{data.map(user => (
<div key={user.id}>{user.name}, {user.email}</div>
))}
</div>
);
}
export default App;
我在控制臺上收到此錯誤，
未捕獲的型別錯誤：data.map 不是函式
uj5u.com熱心網友回復：
您收到錯誤是因為data不是陣列。您得到的回應是一個具有兩個屬性results和info. 由于您的狀態是一個陣列，請將狀態設定為receiveddata.results。
uj5u.com熱心網友回復：
Firsteval，你console.log(data)不會回傳任何東西，因為當你的代碼運行時狀態不會被更新console.log()；所以不要指望得到除錯資訊。
接下來，您的回應是object，而不是array。你可以這樣做：setData(receiveddata.results)然后你可以 map() 你的資料。
在您的渲染中，您還應該像這樣檢查地圖是否不為空：
{data && data.map(user => (
<div key={user.id}>{user.name}, {user.email}</div>
))}
uj5u.com熱心網友回復：
您需要檢查來自您的 API 的資料結構。您的陣列在"results"屬性內。并且"title"也是一個物件。您可以在此處CodeSandbox找到您的代碼的作業示例。檢查控制臺，您將更好地了解回應的結構
uj5u.com熱心網友回復：
您收到此錯誤是因為您將data其視為一個陣列，而它包含一個物件，這是API在本例中回傳的內容。
考慮您從API回傳的資料架構，類似于下面的內容。您可以看到這results是物件中陣列的鍵：
{
results: [
{
...
email: string;
id: {
name: string;
value: string;
}
gender: string;
name: {
title: string;
first: string;
last: string;
}
...
}
}
因此，要訪問first、last名稱和email屬性，您需要在分配給的物件中呼叫陣列上的方法，如下map()所示。resultsdata
data.results在嘗試使用以下命令訪問它之前，請確保已分配data.results && data.results.map(..)：
{
data.results && data.results.map(user => (
<div key={user.id.value}>
{user.name.first}, {user.name.last}, {user.email}
</div>))
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/479852.html
標籤：javascript 反应 api http 获取 API
上一篇：當我將電子郵件代碼上傳到主機（godaddy-windows主機）（Asp.netcore(.net5.0)）時，我的電子郵件代碼不起作用