React中如何将API获取的多条数据逐个渲染到Carts组件？

要在Carts组件中逐个渲染每条API数据的title和description，你需要遍历传入的data数组，为每个数据项生成对应的卡片元素。具体修改如下：

修改后的Carts组件代码 #

import React from 'react'

export default function Carts({ data }) {
    console.log("gelen props:", data)
    
    return (
        <>
            <div className="container">
                {data.map(post => (
                    <div key={post.id} className="card-header">
                        <div className="cart-items">
                            <img src="" alt="" />
                            <div className="cart-head">
                                <h1>{post.title}</h1>
                            </div>
                            <div className="cart-content">
                                <p>{post.description}</p>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </>
    )
}

关键修改说明 #

• 移除冗余props：删除原组件中未使用的title和description参数，仅保留传入的data数组
• 遍历数据数组：使用data.map()方法遍历每个post对象，为每个对象生成独立的卡片结构
• 添加唯一key：给每个遍历生成的元素添加key={post.id}，这是React列表渲染的硬性要求，保证组件更新的性能与正确性
• 渲染对应字段：在每个卡片中通过post.title和post.description访问当前数据项的字段，实现逐条渲染

修改完成后，Carts组件会自动根据ApiRequest传递的data数组，渲染出所有post的标题和描述内容。

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