React 多端点获取数据并渲染结果

Question

我正在做一个

React.js

项目。我正在从具有不同端点的 API 获取数据。我有一个组件，我通过其父级的 props 从该 API 的端点传递数据。另外，在该组件上我正在调用其余端点。我希望能够使用与 props 匹配的所有值（第一个 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;

这是包含整个代码的沙箱链接。

更新

更实用的解释： 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>
))}

它能回答你的问题吗？