运行React食谱详情组件代码出现Uncaught TypeError，求排查

咱们来一步步拆解你遇到的问题，这些错误本质上都是因为你在尝试访问一个未定义（undefined）对象的属性，具体原因和修复方法如下：

错误根源分析 #

• 初始状态导致的渲染错误：你把foodDetails的初始值设成了空对象{}，组件第一次渲染时，foodDetails.recipe是undefined，这时候直接访问foodDetails.recipe.label或者foodDetails.recipe.image自然会抛出类型错误。
• API请求可能未找到匹配的食谱：当res.data.hits.find()找不到符合recipe.recipe.label === match.params.id的项时，会返回undefined，你把这个undefined赋值给了foodDetails，后续渲染时访问其属性就会报错。
• useEffect依赖缺失：你的useEffect依赖数组里只有query，但请求逻辑里用到了match.params.id，当路由参数变化时，这个effect不会重新触发，可能导致获取的食谱和当前路由不匹配，甚至拿到undefined。

修复后的代码示例 #

import React, { useState, useEffect, useContext } from "react";
import { RecipeContext } from "../context/RecipeContext";
import axios from "axios";

const Details = ({ match }) => {
  const { query } = useContext(RecipeContext);
  // 初始值设为null，方便后续判断
  const [foodDetails, setFoodDetails] = useState(null);
  // 新增loading状态，提升用户体验
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchRecipes = async () => {
      try {
        setLoading(true);
        const res = await axios.get(
          `https://api.edamam.com/search?q=${query}&app_id=${ID}&app_key=${KEY}&from=0&to=10`
        );
        // 找到匹配的食谱
        const recipe = res.data.hits.find(
          (item) => item.recipe.label === match.params.id
        );
        if (!recipe) {
          throw new Error("未找到对应的食谱");
        }
        setFoodDetails(recipe);
        setError(null);
      } catch (err) {
        console.error(err);
        setError(err.message);
        setFoodDetails(null);
      } finally {
        setLoading(false);
      }
    };
    fetchRecipes();
    // 添加match到依赖数组，确保路由参数变化时重新请求
  }, [query, match]);

  if (loading) {
    return <div className="container py-5">加载中...</div>;
  }

  if (error) {
    return <div className="container py-5">错误：{error}</div>;
  }

  // 确认foodDetails存在后再渲染
  return (
    <div className="container py-5">
      <div className="row">
        <div className="col s12 l6">
          <p>{foodDetails.recipe.label}</p>
          <img 
            src={foodDetails.recipe.image} 
            alt={foodDetails.recipe.label} 
          />
        </div>
      </div>
    </div>
  );
};

export default Details;

关键修改点说明 #

• 初始状态调整：把foodDetails初始值设为null，配合后续的加载/错误状态判断，避免初始渲染时访问undefined的属性。
• 添加加载与错误状态：在请求过程中显示加载提示，请求失败或找不到食谱时显示错误信息，提升用户体验同时避免报错。
• 完善错误处理：捕获请求失败和找不到食谱的情况，设置对应的状态，防止undefined流入渲染逻辑。
• 补充依赖数组：把match加入useEffect的依赖数组，确保路由参数变化时重新发起请求，保证数据和路由匹配。

另外，还有一个简化写法可以不用修改初始状态：使用可选链操作符（?.），比如把foodDetails.recipe.label改成foodDetails?.recipe?.label，这样当某个环节是undefined时会返回undefined而不是报错，但这种写法只是规避了错误，结合状态判断处理会让逻辑更清晰。

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