React组件传值报错：TypeError: props.items.map() is not a function求解析

Hey，我来帮你梳理这两个React开发里的常见问题，都是新手容易踩的坑，咱们一个个说～

这个报错通常意味着子组件没拿到父组件传递的props，常见原因有这几个：

• 拼写错误：父组件传的是items，但子组件里写成了props.item（少了个s），或者变量名大小写不一致（比如父传Items，子取items）
• 解构props时出错：如果子组件用解构写法，比如function Child({ item })，但父组件传的是items，自然拿不到目标props
• 父组件的数据源未定义：如果父组件里的array变量压根没声明，或者值是undefined/null，相当于没传有效props给子组件

解决思路：

• 先仔细核对父组件传参的变量名和子组件接收的变量名完全一致，大小写也不能错
• 在父组件里加个console.log(array)，确认这个变量确实存在且有值
• 子组件里可以给props设置默认值，比如function Child(props = { items: [] })，避免因props未定义导致的报错

这个报错的核心逻辑很清晰：你调用.map()的props.items不是数组。.map()是数组专属的方法，只有数组类型才能调用它，所以得排查为什么props.items不是数组：

• 父组件的array不是数组：比如你把array初始化成了{}（对象）、undefined或者null，尤其是异步请求数据还没返回时，如果初始状态设成了非数组值，就会触发这个报错
• 接口返回数据格式不对：如果array是接口请求来的，可能返回的是一个包含数组的对象（比如{ list: [...] }），但你直接把整个对象传给了items，而不是里面的数组部分
• 变量名冲突或拼写错误：父组件里的array变量名写错了，导致传了别的非数组值给子组件

解决方法：

1. 确保父组件的array是数组类型：如果是初始化状态，直接设为空数组const array = []；如果是用useState管理的异步数据，初始状态也设为[]，比如const [array, setArray] = useState([])
2. 子组件里做容错处理：调用.map()前先判断是不是数组，或者用可选链加空数组兜底：

   // 写法1：空数组兜底，确保永远能调用map
   (props.items || []).map(item => <div key={item.id}>{item.name}</div>)
   // 写法2：可选链判断，只有当items存在时才调用map
   props.items?.map(item => <div key={item.id}>{item.name}</div>)
   

3. 检查数据源类型：在父组件里打印console.log(typeof array, Array.isArray(array))，确认是不是真的数组；如果是接口返回的数据，要确保你取到了正确的数组字段，比如setArray(response.data.list)而不是直接把整个response.data赋值给array

内容的提问来源于stack exchange，提问作者Muhammad Affan Ashraf