在React中如何操作JSON数据实现动态渲染Card组件？

你当前写法的问题有两个：

1. 循环内固定读取cardItems.cards[0]的属性，导致所有渲染项都是第一个卡片的内容，map回调的第一个参数就是当前循环到的单条卡片数据，直接读取该参数的属性即可
2. key属性不能直接传入对象（你当前的key={item}是错误写法），需要传入当前项唯一的字符串/数字值，你给出的结构中path字段天然唯一，可以直接作为key使用

正确写法（逐字段传参） #

{cardItems.cards.map(item => 
  <CardItem 
    key={item.path}               
    src={item.src}
    text={item.text}
    label={item.label}
    path={item.path} 
  />
)}

简化写法（对象展开传参） #

如果你的CardItem组件接收的props和卡片对象的字段完全对应，还可以用对象展开语法简化代码，效果和上面逐字段传参完全一致：

{cardItems.cards.map(item => <CardItem key={item.path} {...item} />)}

如果没有合适的唯一业务字段，也可以使用map的第二个参数下标作为key，写法如下：

{cardItems.cards.map((item, index) => <CardItem key={index} {...item} />)}

注意优先使用业务唯一字段作为key，列表重排时的性能会更好。

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