React渲染列表遇报错：photo.locations.map is not a function

问题本质 #

你遇到的错误核心是调用map方法的目标并非数组。尽管Network请求返回的locations确实是数组，但组件渲染时photo.locations可能处于非数组状态：

• 组件初始化阶段，photo的初始值可能是undefined、null或空对象，导致photo.locations为undefined
• 数据赋值环节出错，比如接口返回的locations未被正确挂载到photo对象下，或被意外转换为非数组类型

修复方案 #

以下是几种可靠的解决方式：

1. 给photo设置带默认空数组的初始状态

确保组件初始化时photo.locations始终是数组类型：

// React状态初始化示例
const [photo, setPhoto] = useState({ locations: [] });

2. 使用可选链操作符规避undefined

通过?.语法，仅当photo.locations存在时才调用map：

{photo.locations?.map((location) => (
  <MenuItem
    key={location.id}
    value={location.name}
  >
    {location.name}
  </MenuItem>
))}

3. 显式校验数组类型

用Array.isArray做前置判断，逻辑更严谨：

{Array.isArray(photo.locations) && photo.locations.map((location) => (
  <MenuItem
    key={location.id}
    value={location.name}
  >
    {location.name}
  </MenuItem>
))}

4. 检查数据赋值逻辑

确认接口返回的数据被正确处理：

// 接口请求赋值示例
fetch('/api/photo')
  .then(res => res.json())
  .then(data => {
    // 确保接口返回的locations被正确挂载到photo对象
    setPhoto({ ...data });
    // 若接口直接返回locations数组，需调整赋值逻辑：
    // setPhoto({ locations: data });
  });

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