本文讲解如何将 api 获取的数组数据逐条传递给子组件并渲染，核心是使用 map 方法遍历数据，在父组件中为每个数据项动态创建子组件实例，并正确传递字段（如 title、description）作为 props。
在 React 中，当从 API（例如 https://dummyjson.com/posts）获取到一个包含多个对象的数组（如 data.posts）时，若希望每个对象独立渲染为一个卡片组件（如 Carts），不能直接将整个数组传给单个组件实例——那样会导致 props 解构失败或渲染逻辑混乱。正确的做法是在父组件中对数据数组执行 .map()，为每一项生成一个独立的 <Carts /> 组件，并将当前项（如 data.title、data.body）作为具体属性传入。
首先，修正 ApiRequest 组件：移除将整个数组传给单个 <Carts /> 的写法，改用 map 渲染列表：
import React, { useEffect } from 'react';
import { useState } from 'react';
import Carts from './Carts/Carts';
export default function ApiRequest() {
const [dataApi, setDataApi] = useState([]);
useEffect(() => {
const fetchApi = async () => {
try {
const response = await fetch('https://dummyjson.com/posts');
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
const data = await response.json();
setDataApi(data.posts || []);
} catch (err) {
console.error('API fetch failed:', err);
}
};
fetchApi();
}, []);
return (
<div className="api-container">
{dataApi.length > 0 ? (
dataApi.map((post, index) => (
<Carts
key={post.id || index} // 推荐使用唯一 id，fallback 到 index
title={post.title}
description={post.body}
id={post.id}
/>
))
) : (
<p>Loading posts...</p>
)}
</div>
);
}接着，同步更新 Carts 组件，使其接收解构后的 title 和 description（而非整个 data 对象），提升可读性与类型安全：
import React from 'react';
export default function Carts({ title, description, id }) {
// 可选：添加基础校验
if (!title || typeof title !== 'string') {
console.warn(`Carts received invalid title for id=${id}`);
return null;
}
return (
<div className="container">
<div className="card-header">
<div className="cart-items">
{/* 此处可补充动态图片逻辑，例如 post.coverImage */}
<img
src={`https://via.placeholder.com/60x60?text=Post+${id}`}
alt={`Post ${id}`}
className="cart-image"
/>
<div className="cart-head">
<h1>{title}</h1>
</div>
<div className="cart-content">
<p>{description}</p>
</div>
</div>
</div>
</div>
);
}✅ 关键要点总结：
- ✅ 必须使用 key 属性：React 要求列表渲染时每个元素有稳定唯一的 key，优先使用 API 返回的 id（如 post.id），避免仅依赖 index（可能导致状态错乱）；
- ✅ props 解构要精准：子组件应明确接收所需字段（title, description），而非整个数据对象，便于维护和 TypeScript 类型定义；
- ✅ 增加加载与错误边界：实际项目中建议添加 loading 状态、空数据提示及错误 fallback UI；
- ✅ 注意 API 响应结构：dummyjson.com/posts 返回的是 { posts: [...] }，确保取值路径正确（即 data.posts）。
通过以上改造，即可实现“一条 API 数据 → 一个卡片组件”的清晰映射关系，满足逐条展示需求。
