React渲染错误求助：undefined不是对象（计算itineraries[index].places时）

错误原因 #

核心问题是当itineraries为空对象时，Object.keys(itineraries)[0]返回undefined，此时访问itineraries[index].places会触发报错。

首次创建用户时itineraries有数据，逻辑正常运行；但后续操作（比如删除数据、状态重置）或组件初始化阶段itineraries未加载完成时，就会触发这个错误。另外你代码里的useEffect清理函数写法错误，() => setSelectedItinerary([])没有被正确返回，起不到清理作用。

修复方案 #

1. 增加空值校验，避免访问undefined属性 #

修改useEffect逻辑，先判断itineraries是否有数据再执行后续操作：

React.useEffect(() => {
  const itineraryKeys = Object.keys(itineraries);
  // 处理itineraries为空的情况
  if (itineraryKeys.length === 0) {
    setSelectedItinerary([]);
    setSelectedDay(''); // 或设置符合业务逻辑的默认值
    return;
  }

  const firstKey = itineraryKeys[0];
  setSelectedItinerary(itineraries[firstKey].places as ItineraryPlace[]);
  setSelectedDay(firstKey);

  // 正确返回清理函数
  return () => setSelectedItinerary([]);
}, [itineraries]);

2. 规范状态初始化 #

确保itineraries的初始值为{}，同时selectedItinerary初始值设为[]、selectedDay设为空字符串或其他默认值，避免状态未初始化引发的渲染异常。

3. 排查状态更新逻辑 #

检查所有修改itineraries的操作（比如删除用户、数据同步），确保这些操作后itineraries的结构符合预期，避免出现非预期的空对象或异常数据结构。

内容的提问来源于stack exchange，提问作者Max Ellison Ocon