调用SpaceX API获取数据报错apiData不是函数，求技术支持

你遇到的核心问题是调用的SpaceX API返回单个对象而非数组，但你尝试用数组专属的map方法遍历它，导致报错。

具体来说，你请求的https://api.spacexdata.com/v3/missions/F3364BF是单个任务的详情接口，返回的是包含该任务信息的对象，而非任务数组。你的初始apiData是数组，但fetch后将单个对象赋值给它，此时apiData变为对象，对象没有map方法，因此触发报错。

以下是两种针对性解决方案：

方案1：渲染单个任务详情 #

如果需求是展示指定ID的单个任务，直接渲染对象属性即可，无需map：

const Mission = () => {
  const [missionData, setMissionData] = useState(null);
  const [rocketData, setRocketData] = useState(null);

  const fetchData = async () => {
    try {
      const res = await fetch("https://api.spacexdata.com/v3/missions/F3364BF");
      if (!res.ok) {
        throw new Error("Network response was not ok");
      }
      const data = await res.json();
      setMissionData(data);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  const handleClick = (mission) => {
    setRocketData(mission);
  };

  // 数据未加载时显示占位
  if (!missionData) return <div>Loading...</div>;

  return (
    <div onClick={() => handleClick(missionData)}>
      <p>{missionData.mission_name}</p>
      <p>{missionData.mission_id}</p>
      <p>{missionData.description}</p>
    </div>
  );
};

export default Mission;

方案2：获取所有任务并遍历 #

如果需求是展示多个任务，修改API地址为所有任务的接口（不带任务ID），返回数组后即可用map遍历：

const Mission = () => {
  const [missions, setMissions] = useState([]);
  const [rocketData, setRocketData] = useState(null);

  const fetchData = async () => {
    try {
      // 修改为所有任务的接口
      const res = await fetch("https://api.spacexdata.com/v3/missions");
      if (!res.ok) {
        throw new Error("Network response was not ok");
      }
      const data = await res.json();
      setMissions(data);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  const handleClick = (mission) => {
    setRocketData(mission);
  };

  return (
    <div>
      {missions.map((mission) => (
        <div key={mission.mission_id} onClick={() => handleClick(mission)}>
          <p>{mission.mission_name}</p>
          <p>{mission.mission_id}</p>
          <p>{mission.description}</p>
        </div>
      ))}
    </div>
  );
};

export default Mission;

额外优化建议 #

• 避免用index作为key，尽量使用数据中唯一标识（如mission_id），提升组件渲染性能。
• 给state起更清晰的命名，比如missions对应任务数组、missionData对应单个任务，避免混淆。

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