我在做一個React.js專案。我正在嘗試從具有多個端點的API中提取資料。我在創建一個函式時遇到了問題，該函式可以一次提取所有資料，而不必單獨執行每個端點。在console.log給出了一個空陣列并沒有得到顯示。道具“電影”是來自父母的資料并且作業正常。它也來自同一 API 的另一個端點。這是代碼：
import { useEffect, useState } from "react";
import styles from './MovieDetail.module.css';
const MovieDetail = ({films}) => {
const [results, setResults] = useState([]);
const fetchApis = async () => {
const peopleApiCall = await fetch('https://www.swapi.tech/api/people/');
const planetsApiCall = await fetch('https://www.swapi.tech/api/planets/');
const starshipsApiCall = await fetch('https://www.swapi.tech/api/starships/');
const vehicleApiCall = await fetch('https://www.swapi.tech/api/vehicles/');
const speciesApiCall = await fetch('https://www.swapi.tech/api/species/');
const json = await [peopleApiCall, planetsApiCall, starshipsApiCall, vehicleApiCall, speciesApiCall].json();
setResults(json.results)
}
useEffect(() => {
fetchApis();
}, [])
console.log('results of fetchApis', results)
return (
<div className={styles.card}>
<div className={styles.container}>
<h1>{films.properties.title}</h1>
<h2>{results.people.name}</h2>
<p>{results.planets.name}</p>
</div>
</div>
);
}
export default MovieDetail;
更新
我剛剛將 Phil 的帖子添加到代碼中，然后上傳到codesanbox
uj5u.com熱心網友回復：
您想從每個請求中獲取并檢索 JSON 流。
像這樣的東西
const urls = {
people: "https://www.swapi.tech/api/people/",
planets: "https://www.swapi.tech/api/planets/",
starships: "https://www.swapi.tech/api/starships/",
vehicles: "https://www.swapi.tech/api/vehicles/",
species: "https://www.swapi.tech/api/species/"
}
// ...
const [results, setResults] = useState({});
const fetchApis = async () => {
try {
const responses = await Promise.all(Object.entries(urls).map(async ([ key, url ]) => {
const res = await fetch(url)
return [ key, (await res.json()).results ]
}))
return Object.fromEntries(responses)
} catch (err) {
console.error(err)
}
}
useEffect(() => {
fetchApis().then(setResults)
}, [])
每個 URL 將決議為一個陣列，如...
[ "people", [{ uid: ... }] ]
一旦所有這些都解決了，它們將成為一個物件（通過Object.fromEntries()）
{
people: [{uid: ... }],
planets: [ ... ],
// ...
}
請注意，每個屬性都是一個陣列，因此您需要類似
<h2>{results.people[0].name}</h2>
或回圈。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/390105.html
標籤：javascript 反应 接口 目的 获取-api
下一篇：型別錯誤：“員工”物件不可呼叫