React Router传递数组Props异常：meal.food未定义问题求助

核心错误原因 #

1. 初始state设置错误：你写的useState(Object)是把初始值设为Object构造函数，而非预期的空meal对象。首次渲染时meal是函数类型，不是正常的对象结构，直接访问meal.food必然报错。
2. 缺少条件渲染：即便state设置正确，setMeal是异步操作，组件首次渲染时meal还未被更新，直接调用meal.food.map会因meal.food为undefined触发错误。
3. setState异步特性：setMeal不会立即更新state，调用后立刻console.log(meal)拿到的是更新前的初始值，这就是你在useEffect里看不到meal.food的原因。

分步修复 #

1. 修正初始state并添加TypeScript类型（可选但推荐） #

先定义对应的类型确保TS类型检查：

interface Food {
  id?: number;
  name: string;
  kcal: number;
}

interface Meal {
  id: number;
  name: string;
  food: Food[];
  calories: number;
}

再把初始state改为null或空对象：

const [meal, setMeal] = useState<Meal | null>(null);

2. 添加条件渲染避免报错 #

渲染food列表时，先用可选链操作符判断meal和meal.food是否存在：

{meal?.food?.map((foodItem) => (
  <Food
    key={foodItem.id}
    {...foodItem} // 传递food属性给Food组件
  />
))}

?.会在链上某一步为undefined/null时停止执行，不会抛出错误。

3. 解决useEffect中console.log的问题 #

因为setMeal是异步的，调用后直接打印meal拿不到最新值，你可以：

• 直接打印location.state.meal（此时已确认它存在）
• 或新增一个监听meal变化的useEffect：

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

// 监听meal状态变化
useEffect(() => {
  console.log("已更新的meal:", meal);
}, [meal]);

4. 处理无state的情况（可选） #

如果用户直接刷新MealDetails页面，location.state会丢失（state存在浏览器内存而非URL中），可以在useEffect里判断并导航回列表页：

useEffect(() => {
  if (!location.state?.meal) {
    navigate('/');
    return;
  }
  setMeal(location.state.meal);
}, [location, navigate]);

关于你的疑问：Props是否会在首次渲染前加载？ #

你所说的location.state虽不是传统组件props，但本质上：React组件首次渲染时，location对象已存在，但location.state可能为空。比如直接访问详情页时state不存在；从列表页跳转过来时state会在首次渲染时可用，但你的state更新是异步的，所以首次渲染时meal还是初始值，必须做条件判断。

内容的提问来源于stack exchange，提问作者Cinc-B