React中useEffect后直接访问数组元素属性报undefined，map正常的问题求助

问题原因 #

• 初始渲染阶段，rooms的初始值是你定义的空数组[]，此时rooms[0]等于undefined，直接访问undefined.guests.primaryGuestInfo.firstName必然会抛出undefined相关的属性访问错误。
• useEffect会在组件初始渲染完成后才执行，里面的异步请求拿到数据后调用setRooms更新状态——这个状态更新是异步的，不会立刻改变当前渲染周期的rooms值。你的直接访问代码会在每一次组件渲染时执行，包括初始渲染那次，所以第一次执行时必然报错。
• 而map方法遍历空数组时，不会执行回调函数，所以初始渲染阶段不会触发属性访问逻辑；等setRooms更新状态后组件重新渲染，rooms有了数据，map才会执行回调，自然能正常获取属性值。

解决方法 #

方法1：使用可选链操作符（推荐） #

通过?.安全访问嵌套属性，只要中间任意一层值为undefined或null，就会返回undefined而不报错：

const singular_room = rooms[0];
console.log(singular_room?.guests?.primaryGuestInfo?.firstName);

方法2：添加条件判断 #

先确认singular_room存在，再访问嵌套属性：

const singular_room = rooms[0];
if (singular_room) {
  console.log(singular_room.guests.primaryGuestInfo.firstName);
}

方法3：结合加载状态判断 #

利用已有的loading状态，确保数据加载完成后再访问：

if (!loading && rooms.length > 0) {
  const singular_room = rooms[0];
  console.log(singular_room.guests.primaryGuestInfo.firstName);
}

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