React卡片列表未显示问题：传递数据后卡片未渲染

AI 小北

2026-8-8

React卡片组件未渲染问题排查与修复

核心问题与修复方案

1. CardsList组件中map函数未返回组件

在cardsList组件的map遍历回调中，你用大括号{}包裹<OneCard />组件，但没有显式返回该组件，导致遍历后未生成任何DOM元素——这是卡片未渲染的直接原因。

修正方式二选一：

将大括号{}改为小括号()，利用箭头函数的隐式返回特性
在大括号内添加return语句

2. OneCard组件接收的props不匹配

oneCard组件中使用了props.CardTitle和props.CardText，但父组件传递<OneCard />时未提供这两个属性，会导致卡片标题和文本区域为空。可根据现有数据补充传递这两个props。

修正后的完整代码

cardsList组件（核心修正）

import OneCard from "../common/card/card";

function cardsList(props) {
  if (props.cards.length === 0) {
    return (
      <div>
        <h2>No users found</h2>
      </div>
    );
  }

  return (
    <div className="cardsList">
      <ul>
        {/* 使用小括号实现隐式返回 */}
        {props.cards.map((card) => (
          <OneCard
            key={card.id}
            id={card.id}
            image={card.image}
            country={card.country}
            fullName={card.fullName}
            cost={card.cost}
            duration={card.duration}
            CardTitle={card.fullName}
            CardText={`${card.cost} / ${card.duration}`}
          />
        ))}
      </ul>
    </div>
  );
}

export default cardsList;