React+Redux用map渲染JSX报错：Cannot read properties of undefined

1. 初始状态类型不匹配
   你把category的初始状态设为[]（数组），但在JSX中直接访问category.payload.data——数组本身没有payload属性，组件首次渲染时（此时异步请求还未完成），category.payload就是undefined，读取data自然触发Cannot read properties of undefined (reading 'data')错误，这和API是否返回数据无关。

2. dispatch返回值使用错误
   dispatch(ads_category(data))的返回值是分发的action对象，你直接将其赋值给category存在两个问题：

• axios的响应对象自带data属性（即API返回的实际数据），你应该先提取data再传给action creator，比如dispatch(ads_category(data.data))；
• Redux的正确用法是通过useSelector从store中获取状态，而非把dispatch结果存在组件本地state，你当前的写法混淆了Redux状态和组件本地状态的逻辑。

3. 异步请求时序问题
   即使API返回了数据，组件首次渲染时category还是初始的空数组，此时访问category.payload必然是undefined，进而读取data触发错误。

• 修正初始状态：将category初始值改为{ payload: { data: [] } }，确保首次渲染时category.payload.data是合法的空数组，map方法可正常执行。
• 规范Redux使用逻辑：
  1. 正确处理axios响应数据：

     const res = await axios.get("http://127.0.0.1:8000/ads_category/")
     dispatch(ads_category(res.data))
     

  2. 使用useSelector从store获取状态，替代组件本地state：

     const categoryList = useSelector(state => state.adsCategory || [])
     

  3. 渲染时直接遍历获取到的状态：

     {categoryList.map(item => item.main_category)}
     

• 可选：添加加载状态：在请求完成前显示加载提示，提升用户体验。

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