React.js 获取 API 的多个端点

Question

我正在做一个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

Answer 1

您想从每个请求中获取并检索 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>

或者一个循环。