React中实现食谱卡片循环展示不同数据的问题求助

不需要重新设计组件结构，只需要修正循环渲染时的数据传递逻辑即可，核心是确保每个RecipeCard拿到对应条目的食谱数据。

1. 修正RecipeListPage的循环逻辑 #

遍历data.hits数组时，给每个RecipeCard传入当前循环项的食谱数据，同时添加唯一key（推荐用食谱的唯一ID，没有的话用索引）：

// RecipeListPage组件示例（React）
import RecipeCard from './RecipeCard';

function RecipeListPage({ data }) {
  return (
    <div className="recipe-list-container">
      {data.hits.map((hitItem, idx) => (
        // 传递当前项的recipe数据，并设置唯一key
        <RecipeCard 
          key={hitItem.recipe.id || idx} 
          recipeData={hitItem.recipe} 
        />
      ))}
    </div>
  );
}

2. 确保RecipeCard正确接收并使用传入的数据 #

在RecipeCard组件中，通过props获取传入的食谱数据，替换掉原来硬编码的固定内容：

// RecipeCard组件示例（React）
function RecipeCard({ recipeData }) {
  return (
    <div className="recipe-card">
      <h3>{recipeData.label}</h3>
      <img src={recipeData.image} alt={recipeData.label} />
      <p>热量: {Math.floor(recipeData.calories)}千卡</p>
      {/* 其他需要展示的食谱字段，都从recipeData中读取 */}
    </div>
  );
}

常见错误排查 #

• 检查是否在循环时错误传递了固定索引的数据（比如始终传data.hits[0].recipe）
• 确认RecipeCard没有硬编码固定的食谱内容，所有展示数据都来自props
• 循环时务必添加唯一key，避免React渲染警告和性能问题

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