React数组类型Props访问报错：Uncaught TypeError无法读取属性'0'

核心问题 #

报错说明你访问location.pictures[0]时，location.pictures是undefined——要么location本身未定义/还没加载，要么你对location的结构理解有误（比如把数组和对象搞混了）。

具体解决方案 #

1. 先确认location的实际值 #

在组件里打印location，明确它的结构和初始状态：

console.log('当前location值:', location);

如果是异步获取数据（比如从接口拉取），初始阶段location大概率是undefined或空值，这时候直接访问属性必然报错。

2. 用可选链避免报错 #

使用ES6的可选链操作符?.，在属性不存在时自动终止访问，不会抛出错误：

// 直接访问时加可选链
const firstPic = location?.pictures?.[0];
// 渲染时也可以配合条件判断
{firstPic && <img src={firstPic} alt="第一张图" />}

3. 设置默认Props保证初始结构 #

给组件的location设置默认值，确保初始状态下结构完整：

function LocationComponent({ location = { pictures: [] } }) {
  return <div>{location.pictures[0] && <img src={location.pictures[0]} />}</div>;
}

注意：如果你说location是数组类型Props，那数组本身没有pictures属性——这说明你可能混淆了结构。比如location是包含多个地点对象的数组，那应该先取数组元素再访问pictures：

// 假设location是数组，每个元素是带pictures的对象
const firstPic = location[0]?.pictures?.[0];

4. 确保数据加载完成后再传递Props #

如果location是异步获取的，父组件要等数据加载完成再传给子组件：

// 父组件中
{loadedLocation && <LocationComponent location={loadedLocation} />}

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