React项目中基于首个API响应调用第二个API并整合传参的实现问题

现有代码问题 #

• 第一个接口返回的response.data是文章数组，你直接读取response.data.external_id会得到undefined，直接导致第二个请求参数错误，无法拿到正确数据
• 两个接口数据分开存储在两个状态中，没有做关联整合，子组件接收后还需要额外做匹配逻辑，不符合你的需求

调整后的实现代码 #

import { useState, useEffect } from 'react';
import axios from 'axios';
import Posts from './Posts'; // 替换为你自己的子组件引入路径

const App = () => {
    // 直接存整合后的完整数据，无需分开存两个状态
    const [mergedPosts, setMergedPosts] = useState([]);

    useEffect(() => {
        // 用async/await写法逻辑更清晰，避免嵌套过深的Promise链
        const fetchData = async () => {
            try {
                // 第一步：请求第一个接口拿到基础文章数据
                const postsRes = await axios.get('http://localhost:2000/posts');
                const posts = postsRes.data;

                // 第二步：提取所有external_id批量请求关联数据
                const externalIds = posts.map(item => item.external_id);
                const externalRequests = externalIds.map(id => axios.get(`http://localhost:2000/posts/${id}`));
                const externalResponses = await Promise.all(externalRequests);
                const externalData = externalResponses.map(res => res.data);

                // 第三步：整合两个接口的数据
                const merged = posts.map(post => {
                    // 匹配对应external_id的图片数据
                    const matchExternal = externalData.find(item => item.id === post.external_id);
                    return {
                        ...post,
                        image: matchExternal?.image || '' // 匹配不到时给默认值避免报错
                    }
                });

                // 保存整合后的数据
                setMergedPosts(merged);
            } catch (err) {
                console.error('接口请求出错：', err);
            }
        };

        fetchData();
    }, []);


    return (
        <div>
            {/* 直接传整合好的数据给子组件，子组件直接渲染即可 */}
            <Posts posts={mergedPosts}/>
        </div>
    )
}

export default App

兼容场景说明 #

如果你的第二个接口支持返回全量关联数据，不需要按id逐个查询，可以把第二步的批量请求逻辑替换为单次全量请求，性能会更好：

// 第二步替换为单次全量请求即可
const externalRes = await axios.get('http://localhost:2000/postsExternal'); // 替换为你第二个接口的实际全量地址
const externalData = externalRes.data;

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