无法从Redux Store中获取数组数据的问题排查求助

问题根因 #

错误主要由两个可能的配置问题导致：

1. Redux根状态初始结构和reducer返回结构不匹配：你在store.js的全局初始状态里，将根级itemListings字段赋值为空数组，但你的listingReducer返回的是包含loading/error/itemListings三个字段的对象。Redux初始化时，全局初始状态的配置优先级高于reducer的默认state，因此首次渲染时useSelector((state) => state.itemListings)取到的值是空数组，对数组做对象解构得到的itemListings自然是undefined，访问length属性就会触发报错。
2. rootReducer挂载key不匹配：如果你注册listingReducer时对应的key不是itemListings，那useSelector取state.itemListings时拿到的始终是全局初始状态里的空数组，同样会触发报错。

修复步骤 #

1. 先检查rootReducer配置，确保listingReducer挂载的key就是itemListings，如果挂载到其他key下，useSelector取对应key的值即可。
2. 删除store.js中根级的itemListings: []配置，reducer已经自带初始状态{ itemListings: [] }，不需要在全局初始状态重复定义，避免结构覆盖。
3. 如果你需要保留全局初始状态的配置，就把itemListings的初始值改成和reducer返回结构一致：

const initialState = {
  itemListings: {
    loading: false,
    itemListings: [],
    error: null
  },
  nope: { nopeItems: nopeItemsFromStorage },
  keep: { keepItems: keepItemsFromStorage },
}

4. 可以在组件解构时加默认值做兼容防护，避免偶发异常：

const { loading, error, itemListings = [] } = freshItemListings

5. 额外确认：你axios请求返回的data确实是数组类型，可在action dispatch前加console.log(Array.isArray(data))验证，避免接口返回嵌套对象导致数组赋值错误。

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