如何在 React 中逐条渲染 API 返回的多个数据项到组件中-js教程-PHP中文网

如何在 React 中逐条渲染 API 返回的多个数据项到组件中

本文介绍如何将从 api 获取的数组型数据（如文章列表）通过 map() 方法逐个传递给子组件，并在子组件中正确解构和渲染每条数据的字段（如 title、description），避免 props 传递错误与渲染异常。

在你的 ApiRequest 组件中，你已成功获取并存储了来自 https://dummyjson.com/posts 的数据，data.posts 是一个包含多个文章对象的数组。但当前你将整个数组作为 data prop 一次性传给了组件，而 Carts 组件却按单个对象结构（期望接收 title、description 等字段）编写——这会导致渲染失败或内容为空。

✅ 正确做法是：在父组件中遍历数据数组，为每一项数据单独渲染一个实例，并将该项数据作为 props 传入：

// ApiRequest.jsx
return (
  <>
    {dataApi.map((post, index) => (
      
    ))}
  
);

? 注意：优先使用唯一标识符（如 post.id）作为 key，比索引 index 更安全，可避免列表重排时的渲染异常。

接着，更新 Carts 组件，使其能从 props.data 中安全提取所需字段：

// Carts.jsx
export default function Carts({ data }) {
  // 添加空值防护，防止 API 数据未加载完成时渲染报错
  if (!data) return null;

  const { title = '无标题', body = '暂无内容', id } = data;

  return (
    
      
        
          {/* 可选：添加占位图或动态图片逻辑 */}
          @@##@@
          
            {title}
          
          
            {body}

							
								
								
									NewsBang
									盛大旗下AI团队推出的智能新闻阅读App
								
								下载 
							
						
          
        
      
    
  );
}