如何从API响应数组提取ID调用新API？排查代码报错

需要从第一个API响应的results数组中提取ID，以此调用第二个API，但当前代码运行报错，以下是排查出的核心错误原因：

第一个API响应结构 #

{
  "data": {
    "page": 1,
    "results": [],
    "total_pages": 1,
    "total_results": 7
  },
  "headers": {
    "cache-control": "max-age=0, private, must-revalidate",
    "content-type": "application/json;charset=utf-8",
    "etag": "W/\"6e36062c2e4d1dd119fceb30d730158c\""
  },
  "request": {},
  "status": 200,
  "statusText": ""
}

原问题代码 #

import axios from "axios";
import React, { useEffect, useState } from "react";
import { API_KEY } from "./Constants";

const MovieList = () => {
  //   const [data, setData] = useState();
  useEffect(() => {
    axios({
      method: "get",
      url: `https://api.themoviedb.org/3/account/{account_id}/lists?api_key=${API_KEY}&session_id=${localStorage.getItem(
        "sessionID"
      )}`,
    })
      .then((response) => {
         setData(response.data.results);
         const myData = data.map((results, index) => ({
           id: results.id,
         }));
         );
         axios({
           method: "get",
           url: `https://api.themoviedb.org/3/list/${myData}?api_key=${API_KEY}`,
         })
           .then((response) => {
             console.log(response);
           })
           .catch((error) => {
             console.error(error);
           });
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);
  return (
    <></>
  );
};

export default MovieList;

错误原因分析 #

• 状态变量未定义：原代码注释了const [data, setData] = useState();，导致setData和data都未声明，直接调用会抛出ReferenceError。
• 状态初始化错误：即使解开注释，useState()初始值为undefined，直接调用data.map会触发Cannot read properties of undefined (reading 'map')错误，需要初始化为空数组useState([])。
• 异步状态更新误区：setData是异步操作，调用后立刻访问data获取的还是旧值（初始的undefined或空数组），应该直接使用response.data.results来处理ID。
• URL参数错误：myData是对象数组（[{id: xxx}, ...]），直接拼接到URL会变成/list/[object%20Object]，不符合API要求的单个ID格式；如果要批量调用，需要用Promise.all循环处理每个ID。
• 语法错误：myData定义后多了一行多余的);，会导致语法解析失败。
• API路径占位符未替换：第一个API的URL中{account_id}是硬编码的占位符，没有替换为实际的账户ID，会导致第一个请求直接失败。

修正后的代码示例 #

import axios from "axios";
import React, { useEffect, useState } from "react";
import { API_KEY } from "./Constants";

const MovieList = () => {
  const [data, setData] = useState([]);
  const [listDetails, setListDetails] = useState([]);

  useEffect(() => {
    // 替换为实际的账户ID
    const accountId = "your_actual_account_id";
    axios({
      method: "get",
      url: `https://api.themoviedb.org/3/account/${accountId}/lists?api_key=${API_KEY}&session_id=${localStorage.getItem(
        "sessionID"
      )}`,
    })
      .then((response) => {
        const results = response.data.results;
        setData(results);
        // 提取所有ID并批量调用第二个API
        const listIds = results.map(item => item.id);
        // 用Promise.all处理多个请求
        Promise.all(
          listIds.map(id => 
            axios.get(`https://api.themoviedb.org/3/list/${id}?api_key=${API_KEY}`)
          )
        )
        .then(responses => {
          // 整理所有响应结果
          const details = responses.map(res => res.data);
          setListDetails(details);
          console.log(details);
        })
        .catch(error => {
          console.error("获取列表详情失败:", error);
        });
      })
      .catch((error) => {
        console.error("获取列表失败:", error);
      });
  }, []);

  return (
    <></>
  );
};

export default MovieList;

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