匹配Fetch结果到People对象时出现Undefined值问题求助

核心问题 #

1. 重复请求导致数据不匹配：getPeople和getSpecies各自调用fetchPeople，触发两次API请求后nextPageUrl被更新两次，两次拿到的人员数据不是同一批，后续匹配物种时自然找不到对应项。
2. species字段类型处理错误：SWAPI里的species是数组（部分角色有多个物种，或为空数组），直接对数组调用axios.get会报错，且匹配时用字符串URL和数组比较，永远无法匹配，返回undefined。
3. 匹配逻辑错误：info.data.url === person.species中，person.species是数组，info.data.url是字符串，类型不匹配，找不到对应数据。

修复后的代码 #

把人员、家园星球、物种的请求合并，避免重复请求，同时正确处理species数组：

import { useState, useEffect } from 'react';
import axios from 'axios';

function StarWarsApp() {
  const [people, setPeople] = useState([]);
  const [nextPageUrl, setNextPageUrl] = useState("https://swapi.dev/api/people/");
  const [backPageUrl, setBackPageUrl] = useState('');

  // 获取人员+关联家园星球+物种数据
  async function fetchAndAssociateData() {
    // 1. 获取人员列表
    const { data } = await axios.get(nextPageUrl);
    setNextPageUrl(data.next);
    setBackPageUrl(data.previous);
    const persons = data.results;

    // 2. 批量请求家园星球数据
    const homeWorldResponses = await Promise.all(
      persons.map(person => axios.get(person.homeworld))
    );

    // 3. 批量处理物种数据：先收集所有非空的物种URL，去重后请求，再关联
    const allSpeciesUrls = persons.flatMap(person => person.species).filter(Boolean);
    const uniqueSpeciesUrls = [...new Set(allSpeciesUrls)];
    const speciesResponses = await Promise.all(
      uniqueSpeciesUrls.map(url => axios.get(url))
    );
    // 把物种响应转成映射表，方便快速查找
    const speciesMap = new Map();
    speciesResponses.forEach(res => {
      speciesMap.set(res.data.url, res.data.name);
    });

    // 4. 关联所有数据到人员对象
    const processedPeople = persons.map(person => {
      // 匹配家园星球
      const homeWorldRes = homeWorldResponses.find(res => res.config.url === person.homeworld);
      // 匹配物种：处理数组，把每个URL转成物种名称
      const speciesNames = person.species.map(url => speciesMap.get(url)).filter(Boolean);

      return {
        ...person,
        homeworld: homeWorldRes?.data.name || 'Unknown',
        species: speciesNames.length > 0 ? speciesNames : ['Unknown']
      };
    });

    setPeople(processedPeople);
  }

  const backPage = async () => {
    if (!backPageUrl) return;
    const { data } = await axios.get(backPageUrl);
    setNextPageUrl(data.next);
    setBackPageUrl(data.previous);
    // 调用统一的数据获取关联函数
    await fetchAndAssociateData();
  };

  useEffect(() => {
    fetchAndAssociateData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 渲染部分示例
  return (
    <div>
      {people.map(person => (
        <div key={person.name}>
          <h3>{person.name}</h3>
          <p>家园星球：{person.homeworld}</p>
          <p>物种：{person.species.join(', ')}</p>
        </div>
      ))}
      <button onClick={backPage} disabled={!backPageUrl}>上一页</button>
      <button onClick={fetchAndAssociateData} disabled={!nextPageUrl}>下一页</button>
    </div>
  );
}

export default StarWarsApp;

关键优化点 #

• 合并所有请求逻辑，只调用一次人员列表接口，避免数据不一致
• 处理species数组特性：先收集所有需要的物种URL，去重后批量请求，再通过映射表快速匹配，提升性能
• 增加容错处理：如果家园星球或物种请求失败，显示Unknown避免报错
• 统一分页逻辑，上/下一页都调用同一个数据处理函数，保持数据一致性

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