React遍历数组传递props时组件无法正常渲染的问题排查

核心根因 #

这个是React列表渲染的经典踩坑点，和你打印数据能拿到正常值、组件本身逻辑正常都没关系：
你现在写的map回调用{}包裹了组件JSX，但没有写任何返回语句，回调执行完默认返回undefined，最终map生成的是一个全是空值的数组，React解析渲染树时，遇到没有实际节点的数组，自然不会显示任何CheckoutProduct组件。
这也刚好匹配你测试的现象：单独写CheckoutProduct能正常显示，是因为组件直接作为JSX节点插入渲染树，没有经过map生成空数组的环节；只要嵌进map，因为没有返回值，组件根本就没被加到最终的渲染树里。 #

修复步骤 #

1. 补全map的返回逻辑 #

有两种等价的正确写法，二选一即可：

• 写法一：去掉回调外层的大括号，用圆括号触发JS的隐式返回，不需要手动写return

  {basket.map(item => (
    <CheckoutProduct
      key={item.id}
      id={item.id}
      title={item.title}
      image={item.image}
      price={item.price}
      rating={item.rating}
    />
  ))}
  

• 写法二：保留回调的大括号，在内部显式添加return语句把组件返回出去

  {basket.map(item => {
    return <CheckoutProduct
      key={item.id}
      id={item.id}
      title={item.title}
      image={item.image}
      price={item.price}
      rating={item.rating}
    />
  })}
  

2. 补全列表必需的key属性 #

数组渲染列表时，必须给每个组件节点加全局唯一的key值（直接用item里不重复的id字段即可），不然React的虚拟DOM比对会出现渲染错乱、组件状态不匹配的问题，属于React列表渲染的强制规范。

3. 修正代码笔误 #

你原代码里给image属性传的是item.title，如果CheckoutProduct组件内部依赖image字段渲染商品图，就算返回值正常了，图片区域也会显示异常，记得把image的取值改成对应存储图片URL的字段。 #

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