我知道這個問題再次被問到，但我不確定我做錯了什么，因為沒有解決方案對我有用。我的代碼：
import React, { useEffect, useState } from "react";
import "./App.css";
function App() {
const [items, setItems] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
fetch("https://jsonplaceholder.typicode.com/users")
.then((json) => {
setItems(json.items);
})
.catch((err) => {
console.log(err);
})
.finally(() => {
setLoading(false);
});
}, []);
if (loading) {
return <p>Data is loading...</p>;
}
return (
<div className="App">
<ul>
{items.map((item) => (
<li key={item.id}>
name: {item.name} | email: {item.email}
</li>
))}
</ul>
</div>
);
}
export default App;
我也嘗試這樣寫，以檢查陣列是否存在并且我沒有得到錯誤但我沒有得到任何結果：
{items?.map((item) => (
<li key={item.id}>
name: {item.name} | email: {item.email}
</li>
))}
uj5u.com熱心網友回復：
您好，查看 jsonplaceholders 檔案，您需要在像這樣獲取時首先使用 json() 轉換回應
useEffect(() => {
setLoading(true);
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => {
return response.json() // return response.json() first
})
.then((json) => {
setItems(json) // then set the json into the items
})
.catch((err) => {
console.log(err);
})
.finally(() => {
setLoading(false);
});
}, []);
如果不先將其轉換為 json，則設定回應物件而不是 json 陣列
uj5u.com熱心網友回復：
將 useState 更改為：
const [loading, setLoading] = useState(true);
在 useEffect 未定義代碼之前首次加載 App 函式回傳。
如果它仍然不起作用，請在訪問道具之前添加問號。像這樣：
<ul>
{items?.map((item) => (
<li key={item?.id}>
name: {item?.name} | email: {item?.email}
</li>
))}
</ul>
添加問號使其可選。
uj5u.com熱心網友回復：
您需要先將回應轉換為 json，然后設定為狀態。
fetch("https://jsonplaceholder.typicode.com/users")
.then((res) => res.json()).then((data) => {
setItems(data);
})
從檔案中，fetch不直接回傳JSON回應正文，而是回傳一個用Response物件決議的承諾。Response反過來，該物件不直接包含實際的JSON回應主體，而是整個 HTTP 回應的表示。因此，要從 Response 物件中提取 JSON 正文內容，請使用該json()方法，該方法回傳第二個 Promise，該 Promise 決議為將回應正文文本決議為JSON.
uj5u.com熱心網友回復：
Fetch回傳一個回應，您需要在使用它之前將其轉換為 JSON。
fetch('https://jsonplaceholder.typicode.com/users')
.then((res) => {
res.json();
})
.then((items) => {
setItems(items);
})
.catch((err) => {
console.log(err);
})
.finally(() => {
setLoading(false);
});
uj5u.com熱心網友回復：
檢查此代碼
useEffect(() => {
const fetchData = async() => {
setLoading(true)
const res = await fetch("https://jsonplaceholder.typicode.com/users");
const data = await res.json();
setLoading(false);
setItems(data);
}
fetchData()
}, []);
uj5u.com熱心網友回復：
嘗試使用以下代碼：
<ul>
{items?.map((item) => (
<li key={item?.id}>
name: {item?.name} | email: {item?.email}
</li>
))}
</ul>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/475857.html
標籤：javascript 反应 api
下一篇：空手道API框架-測驗依賴