使用Reselect选择器获取Shop集合时出现TypeError问题排查求助

让我们一步步拆解你的问题，找到根源并解决它：

错误核心原因 #

你遇到的错误本质是：selectCollectionItem 选择器最终返回了 undefined，导致组件中试图解构 collections.title 时失败。追根溯源，是 selectCollections 选择器拿到的 shop.collections 本身就是 undefined，后续的 collections[collectionUrl] 自然也取不到值。

可能的触发点及解决方案 #

1. Redux Store 中 shop 切片的初始状态缺失 collections #

这是最常见的原因：你的 Redux store 里 shop 部分的初始状态没有给 collections 设置默认值，导致初始时 state.shop.collections 是 undefined。

修复方案：
在你的 shop reducer 中，给初始状态加上 collections 的默认值（直接用 SHOP_DATA 或者空对象，取决于你是否异步加载数据）：

// shop.reducer.js
import SHOP_DATA from './shop.data';

const INITIAL_STATE = {
  collections: SHOP_DATA, // 直接用静态数据初始化，或者如果是异步加载就设为 {}
  // 可选：添加加载状态，比如 isLoading: false, error: null
};

const shopReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    // 这里处理你的异步加载/更新 action
    default:
      return state;
  }
};

export default shopReducer;

2. 选择器未做空值保护 #

即使初始状态设置了默认值，也可能存在数据加载延迟或者路由参数不匹配的情况，导致 collections 或目标集合为 undefined。我们需要给选择器加上空值兜底。

修复方案：
修改你的选择器代码，加入空对象默认值：

import { createSelector } from "reselect";

export const selectShop = state => state.shop;

// 给 collections 兜底为空对象
export const selectCollections = createSelector(
  [selectShop],
  shop => shop.collections || {}
);

export const selectCollectionForPreview = createSelector(
  [selectCollections],
  collections => Object.keys(collections).map(key => collections[key])
);

// 找不到对应集合时返回空对象，避免组件解构报错
export const selectCollectionItem = collectionUrl => createSelector(
  [selectCollections],
  collections => collections[collectionUrl] || {}
);

3. 路由参数与数据 key 不匹配 #

检查你的路由参数 ownProps.match.params.collectionId 是否和 SHOP_DATA 中的 key 完全一致（比如是小写的 hats 而不是大写的 Hats）。如果参数大小写或拼写不对，collections[collectionUrl] 也会返回 undefined。

4. 组件未处理加载/空状态 #

即使前面的问题都修复了，异步加载数据时仍会有短暂的 collections 为空的阶段，需要在组件中做判断避免报错。

修复方案：
修改组件代码，增加空值判断：

const CollectionPage = ({collection}) => {
  // 这里建议把 props 名字改成 collection（单数更准确，因为你取的是单个集合）
  if (!collection.title) {
    return <div className="collection-page">Loading collection...</div>;
  }

  const {title, items} = collection;
  return(
    <div className="collection-page">
      <h2 className='title'>{title}</h2>
      <div className='items'>
        {items.map(item => <CollectionItem key={item.id} item={item}/>)}
      </div>
    </div>
  )
}

const mapStateToProps = (state, ownProps) => ({
  collection: selectCollectionItem(ownProps.match.params.collectionId)(state)
})

export default connect(mapStateToProps)(CollectionPage);

总结 #

按照上面的步骤排查：先确保 reducer 初始状态正确，再给选择器加空值保护，最后在组件中处理空状态，就能解决这个解构错误啦。

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