React练习API时导入Recipe组件无渲染且控制台无报错，仅表单正常显示

• 核心故障原因：setRecipes 调用逻辑错误，未触发React状态更新
  原有代码中写为 setRecipes = data.hits，这是对useState返回的setter函数进行重新赋值，完全没有执行状态更新操作。这会让recipes从组件挂载到卸载始终保持初始空数组，recipes.map 遍历不到任何条目，后续的Recipe组件自然不会渲染。这类操作不会触发JS运行时报错，完全匹配「控制台无报错、仅搜索表单正常显示」的现象。
  正确操作是调用setter函数传入新值：setRecipes(data.hits)
• 列表渲染缺失必填key属性
  状态更新完成后，通过map循环生成多个同级Recipe组件时，需要给每个组件传入唯一的key标识，否则React会触发列表key缺失的渲染警告，影响列表更新的性能与正确性。
• 数据传递缺失
  现有代码中<Recipe />没有接收任何来自接口的菜谱数据，即便组件能正常渲染，也只会展示硬编码的"Title""Calories"占位文本，无法展示接口返回的真实菜谱内容。
• 接口返回结构校验
  完成setter逻辑修正后，注意检查console打印的data.hits是否为数组结构，如果接口返回结构和预期不一致（比如实际的菜谱列表字段不是hits），也会导致赋值后内容为空，依然无法渲染列表。

修正后的核心代码参考 #

// App.js 中修正后的异步请求逻辑
const getRecipes = async () => {
  const response = await fetch(`///url///`);
  const data = await response.json();
  // 正确调用setter更新状态
  setRecipes(data.hits);
  console.log(data.hits);
};

// App.js 中修正后的列表渲染逻辑
{recipes.map((recipe, index) => (
  // 传入唯一key，同时把单条菜谱数据作为prop传递给子组件
  <Recipe 
    key={recipe.recipe.uri || index} 
    info={recipe.recipe}
  />
))}

可选的Recipe.js适配修改 #

如果需要展示接口返回的真实数据，可以调整Recipe组件接收props并渲染对应内容：

// Recipe.js 适配props传参
const Recipe = ({ info }) => {
  return (
    <div>
      <h1>{info.label}</h1>
      <p>{info.calories}</p>
    </div>
  );
};

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