我有一个ReactTS-App，我通过Router-Dom-Props将一个props 传递给另一个组件.这里的问题是，我可以单独使用meal.name，但如果我使用meal.Food搭配它或单独使用meal，它就不再起作用了.

Uncaught TypeError: meal.food is undefined

我判断了打字脚本和使用效果错误，但我还没有找到解决方案.

props 在第一次渲染之前加载了吗？

UPDATE当我像那样使用meal.Food时，我可以打印它，但在我设置了它之后，我不能在useState中使用它-我是控制台.将它记录在useEffect中.

Meal.tsx

  return (
    <Link className="Meal Link" to={`/MealDetails/${meal.id}`} state={{ meal: meal }}>
      <div className="MealIconMealName">
        <div className="MealName">{meal.name}</div>
      </div>
    </Link>
  );
};

MealDetails.tsx

const MealDetails = () => {
  const location = useLocation();
  const navigate = useNavigate();
  
  const [meal, setMeal] = useState(Object);

  useEffect(() => {
    if (location.state) {
      if (location.state.meal) {
        setMeal(location.state.meal);
        console.log("useEffect" + meal);
      }
    }
    return () => {};
  }, [location]);

  return (
    <div className="MealDetails">
      <header>
        <div className="HeaderText">{meal.name}</div>
      </header>
      <div className="MealDetailsCalorieCounter"></div>
      {meal.food.map((meal : any) => (
        <Food
          key={meal.id}
        />
      ))}
    </div>
  );
};

示例Meal-.json文件中的对象

    { 
      "id": 1,
      "name": "Breakfast",
      "food": [
        {
            "name": "Waffeln",
            "kcal" : 505
        }
      ],
      "calories": 505
    }