选择电影后，SWAPI 不会返回所有人

Question

所以我正在做一个小应用程序，使用 swapi.dev/ 检索星球大战中出现的所有角色。

它应该工作的方式是，一旦我选择了一部电影，其中的所有角色都应该出现，但是，在选择不同的电影时，我会得到不同的结果，例如，如果我选择《星球大战前传 4》 ，我最多有 10 个字符，我显然应该有更多（如果我是正确的，18 个），如果我选择第 1 集，我只会得到 3 个人。这是我用来吸引人的代码：

async function fetchPeople() {
    let res = await fetch('https://swapi.dev/api/people/');
    let data = await res.json();
    return data.results;
}


export const showPeople = async (movies) => {
    const people = await fetchPeople();
    const matchingPeople = [];
    console.log('char count: ', movies.characters.length);
    console.log('peopel count: ', people.length);
    movies.characters.forEach((movieCharacter) => {
        people.forEach((person) => {
            const isMatching = person.url === movieCharacter;
            if (isMatching) {
                matchingPeople.push(person);
            }
        });
    });
    return matchingPeople;
}

现在是棘手的部分：当我 console.log “char count”时，我得到了正确数量的字符（在第 4 集 18 个字符的情况下，在 API 中，但是在 console.log “peopel数”，我最多只能得到 10 个。它变得更奇怪了。

这里是 React 组件用于显示电影的代码：

import React from 'react'
import { Card, Grid, Button } from 'semantic-ui-react'
import {showPeople} from '../controllers/ShowPeople'
// import fakedata from '../fakedata.json'


const Movies = ({data, setPeople}) => {
    console.log(setPeople)
    return (
        <>
        <h1>Movies</h1>
        <Grid columns={3}>
            {data && data.map((movies, i) => {
                return (
                    <Grid.Column key={i}>
                        <Card>
                            <Card.Content>
                                <Card.Header>{movies.title}</Card.Header>
                                <Card.Description>
                                    <strong>Episode</strong>
                                    <p>{movies.episode_id}</p>
                                    <strong>Release</strong>
                                    <p>{movies.release_date}</p>
                                </Card.Description>
                            <Button onClick={ async () => {
                                const people = await showPeople(movies)
                                console.log('test people ',people)
                                setPeople(people)
                            } }>
                                Show People
                            </Button>
                            </Card.Content>
                        </Card>
                    </Grid.Column>
                )
            })}
        </Grid>
    </>
    )
}

export default Movies;

现在，在 console.log("test people") 中，我得到不同的数组结果，具体取决于我选择的电影，有时 6 人，有时 3 人，有时 10 人，但不超过 10 人。

Chrome console screenshot:

可能是什么问题？起初我以为 API 限制了我的请求，但我怀疑我每天在这个 API 上实现 10k 请求。也许问题出在 showPeople 函数上？

Full code on github for more clarity

Answer 1

您可能需要再次查看 api 的文档。

以这个网址为例：api/people/?page=7

{
    "count": 82, 
    "next": "https://swapi.dev/api/people/?page=8", 
    "previous": "https://swapi.dev/api/people/?page=6", 
    "results": [...] //10 results
}

如您所见，这再次显示了 10 个结果。因此我们可以得出结论，每次 api 调用在 results 属性中，api 将始终返回最多 10 个项目。

大多数 API 提供 2 种不同的解决方案。

1. 他们可能有一个属性可以让您更改pageSize。例如，这可能用于在一次 api 调用中返回 50 个对象。
2. 最常见的是它们将具有page 属性。您将需要第二次 api 调用来获取接下来的 x (10) 项。

我能想到两种不同的解决方案。

您可以使用next 属性。如果数据集非常大并且您想使用分页，这是一个好方法。

您还可以做一些简单的数学运算并使用count 属性。例如，想要的 api 调用有 82 个项目。您可以将其除以 10。您将得到 8.2 并将其四舍五入。您现在知道它将有 9 个页面，因此您可以发送 9 个 api 调用。但请记住，这对 API 来说不是那么友好，并且一些公共 API 可能有一些低速率限制。如果您在短时间内发送大量请求，您可能会被列入黑名单。

如果您收到了结果，请将结果附加到本地数组中，然后您可以对它做任何您想做的事情（即显示信息）。

但重要的一点是性能。您希望您的客户加载 82 张不同的图片吗？当您通过新的 api 调用向下滚动时，您可能还想处理页面或数据加载。