调用SWAPI接口选择星球大战电影后未返回全部角色问题咨询

问题根因 #

SWAPI的/api/people接口默认采用分页返回数据，单页仅返回10条角色信息。你当前的fetchPeople函数仅请求了第一页数据，所以people数组长度永远固定为10，最终匹配到的对应电影角色最多也就10个，和实际数量不符。

修复方案 #

修改fetchPeople函数，自动拉取所有分页的角色数据：

async function fetchPeople() {
    let allPeople = [];
    let nextUrl = 'https://swapi.dev/api/people/';
    // 循环拉取所有分页数据
    while (nextUrl) {
        const res = await fetch(nextUrl);
        const data = await res.json();
        allPeople = allPeople.concat(data.results);
        nextUrl = data.next;
    }
    return allPeople;
}

可选优化 #

你当前showPeople里的双重循环匹配效率较低，可以改用Map做索引，减少遍历次数：

export const showPeople = async (movies) => {
    const people = await fetchPeople();
    // 以角色url为key建立索引
    const peopleMap = new Map(people.map(p => [p.url, p]));
    // 直接从Map中匹配，不需要双重循环
    const matchingPeople = movies.characters.map(url => peopleMap.get(url)).filter(Boolean);
    return matchingPeople;
}

内容的提问来源于stack exchange，提问作者mrvanagas