反应获取数据多个端点并呈现结果

Question

我正在做一个 React.js 项目。我正在从具有不同端点的 API 中获取数据。我有一个组件，我通过它的 parent 的道具从这个 API 的端点传递数据。此外，在该组件上，我正在调用其余端点。我希望能够使用与道具匹配的所有值（第一个 API 调用）。问题是第一个 API 调用包括其他端点的值，但只有 url。所以我做了一个函数 lastNumber （不起作用）以使两个值匹配。此外，该功能需要能够拨打超过一位数字的号码，我不知道该怎么做。例如，那些 url 的字符串的 las 字符可能是 1,2 或 10、12,20 等。因此，我需要能够使用“人数”。也许有不同的方法。这是整个组件：

import { useEffect, useState } from "react";    
import styles from './MovieDetail.module.css';

const MovieDetail = ({films}) => {
    const [results, setResults] = useState([]);

    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 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)
    }, [])
    console.log('results', results)

    const lastNumber = Number(films.properties.characters.slice(-1) - 1);
    

    return (
        <div className={styles.card}>
            <div className={styles.container}>
                <h2>{films.properties?.title}</h2>
                <p>{films.description}</p>
                <p>Release date: {films.properties?.release_date}</p>
                <p>Director: {films.properties?.director}</p>
                <p>Producer: {films.properties?.producer}</p>
                <p>Characters: {films.properties?.producer}</p>
                <p>Characters:</p>
                {results.people[lastNumber].map(result => (
                    <ul>
                        <li>{result.properties.name}</li>
                    </ul>
                ))}
            </div>            
        </div>
    );
}
 
export default MovieDetail;

这是一个 sandbox link 的完整代码。

更新

更实际的解释：在 API 中有电影，并且在每一部电影中都有一个在电影中工作的角色（人物）列表。所以，我想渲染电影标题、导演等以及电影中的角色列表。

Answer 1

在 MovieDetail 中，您得到的是 film 对象，而不是电影数组？所以你应该从重命名它开始film，这样更清楚它是一个对象，而不是一个数组。

然后，您知道 film 包含一些您想要的信息，例如在其中玩过的人。所以你必须像这样获取他们的 URL：

const peoples = film.properties.characters.map(characterURL => {
   // fetch the people through an API call 
   const people = await fetch(characterURL).json().results
   return people
}

然后，在 peoples 中，你拥有电影中扮演的每个人。所以如果你想显示字符名称列表，你可以这样做：

{peoples.map(people=> (
    <ul>
        <li>{people.properties.name}</li>
    </ul>
))}

它回答了你的问题吗？

反应获取数据多个端点并呈现结果

React fetch data multiple endpoint and render results

javascript

fetch

reactjs

fetch-api

react-router-dom

更新