应用启动时API数据未定义报错，刷新后正常的解决方法

问题原因 #

应用启动时API请求还未完成，data初始值是空对象，此时访问data.attributes.items[3].options会得到undefined，传给setDropdown后，Object.entries(undefined)就会抛出你看到的类型错误。刷新后数据已经加载完成，所以不会触发错误。

具体修复步骤 #

1. 等待API请求完成后再处理数据 #

修改getDataFunc，确保拿到API返回的有效数据后再调用setDropdown：

const getDataFunc = async () => {
  const res = await getData();
  setData(res);
  // 链式判断确保每一层都存在，避免访问undefined的属性
  if (res?.attributes?.items?.[3]?.options) {
    setDropdown(res.attributes.items[3].options);
  }
};

2. 给setDropdown增加参数校验 #

在setDropdown开头先检查传入的参数是否有效，避免无效参数导致报错：

function setDropdown(query) {
  // 排除null、undefined和非对象类型的参数
  if (!query || typeof query !== 'object') {
    return;
  }
  // 用map简化数组转换逻辑，效果和原for循环一致
  const tempArray = Object.entries(query).map(([key, value]) => ({
    key: value,
    value: key
  }));
  setRoomCount(tempArray);
}

3. 优化初始状态（可选） #

把data的初始值从空对象改成null，更直观区分“未加载”和“加载完成但无数据”的状态：

const [data, setData] = useState(null);

补充说明 #

• 不要在初始化的useEffect里直接调用setDropdown(data.attributes.items[3].options)，此时data还是初始的空对象，必然会拿到undefined。
• ?.是可选链操作符，能安全访问嵌套属性，避免因某一层为undefined而抛出错误。

内容的提问来源于stack exchange，提问作者Onur Serbes