React中无法映射Spoonacular API食谱数据问题求助

核心问题 #

你代码里的关键错误是获取到API返回的results后，没有将其更新到recipes状态中：
在getrecipes函数的判断逻辑里，你写了setrecipes()，这是空调用，并没有把拿到的results数组传递给状态更新函数，导致recipes始终保持初始的空数组状态，所以recipes.length>0的条件永远不满足，map渲染部分不会执行。

修复步骤 #

1. 修正状态更新逻辑：将setrecipes()改为setrecipes(results)，把API返回的结果数组存入状态
2. 处理无结果/请求失败的情况：当results为空或请求出错时，更新加载状态并重置recipes，避免加载状态一直停留
3. 给列表元素添加key：React要求列表渲染时每个元素必须有唯一的key属性，这里可以用食谱的id

修正后的Homepage代码 #

import { useState } from "react";
import RecipeItem from "../../components/recipe-item";
import Search from "../../components/search";

const Homepage = () => {
  const [loadingstate, setloadingstate] = useState(false);
  const [recipes, setrecipes] = useState([]);

  const getdatafromsearchcomponent = (searchdata) => {
    setloadingstate(true);

    async function getrecipes() {
      try {
        const apiresponse = await fetch(
          `https://api.spoonacular.com/recipes/complexSearch?apiKey=2aa0ee8853c34e1f9783e0f882c40f38&query=${searchdata}`
        );
        const result = await apiresponse.json();
        const { results } = result;

        setloadingstate(false);
        // 将获取到的结果数组存入状态，无结果时设为空数组
        setrecipes(results || []);
      } catch (error) {
        // 处理请求失败的情况
        setloadingstate(false);
        setrecipes([]);
        console.error("请求食谱数据失败:", error);
      }
    }
    getrecipes();
  };

  return (
    <div className="homepage">
      <Search getdatafromsearchcomponent={getdatafromsearchcomponent} />

      {loadingstate && (
        <div className="loadingmsg">loading.... please wait</div>
      )}
      {recipes.length > 0 ? (
        recipes.map((item) => (
          // 添加唯一key，用食谱id
          <RecipeItem key={item.id} item={item} />
        ))
      ) : !loadingstate && recipes.length === 0 ? (
        <div>暂无食谱结果</div>
      ) : null}
    </div>
  );
};
export default Homepage;

优化RecipeItem组件（可选） #

可以显示食谱的实际信息，替代固定文本：

const RecipeItem = (props) => {
  const { item } = props;
  return (
    <div className="recipe-card">
      <h3>{item.title}</h3>
      {item.image && <img src={item.image} alt={item.title} />}
      <p>准备时间：{item.readyInMinutes}分钟</p>
    </div>
  );
};
export default RecipeItem;

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