通过Props传递进度条数据时出现TypeError: progressData.map is not a function错误

出现TypeError: progressData.map is not a function的核心原因是子组件接收到的progressData并不是数组，哪怕你觉得父组件里的数据是数组，也可能在传递或渲染流程中出现了偏差，常见的几个场景及解决方式如下：

1. 父组件初始值未设为数组 #

如果父组件是通过状态管理（比如React的useState）存储progressData，但初始值没设为空数组，子组件首次渲染时会拿到undefined或null：

// 错误示例：初始值为undefined
const [progressData, setProgressData] = useState(); 
// 正确做法：初始值设为空数组
const [progressData, setProgressData] = useState([]); 

子组件首次渲染时会优先使用父组件的初始值，非数组值调用map必然报错。

2. 异步数据加载导致的渲染时机问题 #

如果父组件的progressData是从接口/本地存储异步获取的，子组件会在数据返回前先渲染，此时拿到的是初始的非数组值。解决方式是在子组件中添加渲染守卫：

// 子组件中先判断是否为数组再执行map
{Array.isArray(progressData) && progressData.map(item => (
  // 你的进度条项渲染逻辑
))}
// 或者用可选链简化
{progressData?.map(item => (
  // 你的进度条项渲染逻辑
))}

3. props传递时的变量错误 #

检查父组件传递props的代码，确认没有把对象/其他类型数据误传成数组：

// 错误示例：传了包裹数组的对象而非数组本身
<ProgressbarThree progressData={apiResponse} /> 
// 正确做法：提取数组部分
<ProgressbarThree progressData={apiResponse.dataList} /> 

也可能是变量名写错，比如父组件里的数组叫progressList，却写成了progressData传递给子组件。

4. 父组件数据处理时的意外转换 #

父组件在处理数据时可能不小心把数组转成了对象，比如误用Object.assign、解构错误，或者把数组的某个元素当成整个数组传递：

// 错误示例：把数组的第一个元素当成数组传递
setProgressData(apiResponse[0]); 
// 正确做法：传递整个数组
setProgressData(apiResponse); 

排查技巧 #

在父组件和子组件中分别打印progressData的类型和值，快速定位问题：

// 父组件中
console.log('父组件progressData:', progressData, typeof progressData, Array.isArray(progressData));
// 子组件中
console.log('子组件progressData:', props.progressData, typeof props.progressData, Array.isArray(props.progressData));

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