React中调用map报TypeError 无法读取undefined的map属性错误

该错误触发的根本原因是：你调用.map()方法的categories值为undefined。
.map()是数组原型上的内置方法，仅能在数组类型的数据上调用，当你对undefined、null这类非数组值调用该方法时，就会抛出这个类型错误。
结合你提供的代码，常见触发场景有3种：

• 组件作用域内没有定义、也没有从外部导入categories变量就直接使用
• 如果categories是接口返回的异步数据，组件首次渲染阶段数据还未请求完成，你没有给该状态设置数组类型的初始值
• 从props、全局状态（Context、Redux等）中读取categories时，取值路径错误，或者对应状态的初始值不是数组，最终拿到的值为undefined

根据你的数据来源选择对应处理方式即可，核心原则是保证调用.map()时，操作的目标值一定是数组类型：

1. 如果categories是本地静态数据，先检查变量的定义、导入路径是否正确，确认其值为数组类型。
2. 如果categories是异步请求/跨组件传递的动态数据，有两种常用处理方式：
   • 给状态设置数组类型的初始值，以React函数组件的useState为例：

   const Categories = () => {
     // 初始值设为空数组，首次渲染时categories就是合法数组，不会触发报错
     const [categories, setCategories] = useState([])
   
     useEffect(() => {
       // 接口请求拿到数据后再更新状态
       const getCategories = async () => {
         const res = await fetch('/api/categories')
         const data = await res.json()
         setCategories(data)
       }
       getCategories()
     }, [])
   
     return (
       <Container>
         {categories.map((item) =>(
           // 原代码漏传了item数据，这里补上，否则子组件拿不到分类内容
           <CategoryItem key={item.id} item={item}/>
         ))}
       </Container>
     )
   }
   

   • 做可选链+空值兜底，兼容所有可能出现undefined的场景，不需要额外调整初始值：

   const Categories = () => {
     return (
       <Container>
         {/* categories为undefined/null时，?.map会短路不执行，后续??[]保证渲染逻辑正常 */}
         {categories?.map((item) =>(
           <CategoryItem key={item.id} item={item}/>
         )) ?? []}
       </Container>
     )
   }
   

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