我正在慢慢理解服務并使用 React 獲取，但是當我嘗試展示一些東西時，它完全沒有向我展示任何東西。我把代碼放在以防有人可以幫助我。也許我必須看看如何使用 JSON，我不知道。
let datosApi = [];
const recogerDatos = () => {
let json = "https://jsonplaceholder.typicode.com/albums";
let miApi = "http://localhost/dsw/api/";
fetch(json)
.then(data => data.json())
.then(info => {
console.log(info);
this.datosApi = info;
})
}
function Services() {
return (
<>
{datosApi.map(datos => (
<p>{datos.title}</p>
))}
</>
);
}
export default Services;
JSON 資料出現在https://jsonplaceholder.typicode.com/albums
uj5u.com熱心網友回復：
我認為您的示例缺少某些內容，或者您??還沒有完成。
基本上有幾個問題：
- 從未呼叫recogerDatos
- datosApi 未宣告，即使已宣告，它也不是有狀態的，因此不會導致您的專案重新呈現。
我在這里創建了一個作業沙箱，顯示它正在作業，代碼如下：
const [result, setResult] = useState([]);
const recogerDatos = () => {
let json = "https://jsonplaceholder.typicode.com/albums";
fetch(json)
.then((data) => data.json())
.then((info) => {
console.log(info);
setResult(info);
});
};
useEffect(() => {
recogerDatos();
}, []);
return (
<div className="App">
{result.length > 0 && result.map((datos) => <p>{datos.title}</p>)}
</div>
);
recogerDatos 函式在頁面加載時呼叫（參見 useEffect），當獲取成功時更新結果。這會導致重新渲染并顯示專案。
uj5u.com熱心網友回復：
您正在顯示串列中的資料
let datosApi = [];
但是，您似乎沒有使用 API 中的資料填充串列，因為從未呼叫方法 recogerDatos()。
uj5u.com熱心網友回復：
從您的代碼看來，您似乎缺少一些核心 React 模式，例如狀態管理和組件生命周期。由于 React 經常重新渲染組件，因此您希望將獲取的資料等內容存盤到狀態中，以避免它們不斷重置為初始值。當你想要獲取資料時，你通常不想在每次重新渲染時都這樣做（這會導致大量獲取），而是你通常希望根據不同的事件觸發它，例如當組件（即將用于顯示此資料）已安裝。此類事情通常使用組件生命周期方法/useEffect 掛鉤來確保它們在正確的時間點發生。我建議你進入 React 檔案并多學習一些基礎知識，這樣你在編碼時就可以理解主要概念，但是在這里' https://codesandbox.io/s/beautiful-frost-on9wmn?file=/src/App.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/434104.html
標籤：javascript 反应 json jsx
上一篇：溫斯頓記錄器錯誤logger.default.warn不是函式
下一篇：反應點擊處理程式不更新變數