如何在map循环内调用Redux Toolkit的useSelector获取分类详情？

首先明确报错核心原因：React Hooks必须在组件或自定义钩子的顶层作用域调用，不能在循环、嵌套函数（比如map回调、createFinalData内部）里使用，这是Hooks规则的硬性要求，直接在map里调用useSelector必然触发报错。

下面给出三种可行解决方案，可根据你的业务场景选择：

方案1：优化选择器，批量获取分类对应库存（推荐） #

修改选择器逻辑，让它能一次性接收所有分类ID，返回「分类ID => 对应库存列表」的映射表，仅需一次useSelector调用就能拿到全部所需数据，再在map中直接取值。

示例代码： #

// 定义批量获取的选择器
const viewInventoriesByCategoryIds = (state, categoryIds) => {
  return categoryIds.reduce((inventoryMap, categoryId) => {
    inventoryMap[categoryId] = viewInventoriesByCategory(state, categoryId);
    return inventoryMap;
  }, {});
};

// 组件代码
const Dashboard = () => {
  const categories = useSelector(viewFinalCategories);
  // 一次性获取所有分类对应的库存映射
  const inventoryMap = useSelector(state => 
    viewInventoriesByCategoryIds(state, categories.map(cat => cat.id))
  );

  // 实时计算finalData，无需额外存储useState
  const finalData = categories.map(category => ({
    title: category.label,
    category,
    data: inventoryMap[category.id] || []
  }));

  return (
    <SectionList
      sections={finalData}
      // 其他SectionList配置项...
    />
  );
};

该方案性能最优，仅触发一次Redux状态订阅，避免多次useSelector的冗余调用。

方案2：抽分子组件，让子组件处理单个分类的库存获取 #

将单个分类的逻辑拆分为独立子组件，在子组件顶层调用useSelector，完全符合Hooks规则。

示例代码： #

// 子组件：负责单个分类的库存数据获取与渲染
const CategorySection = ({ category }) => {
  // 在子组件顶层调用useSelector，符合规则
  const inventoryData = useSelector(viewInventoriesByCategory(category.id));

  // 返回该分类对应的Section内容
  return (
    <>
      {/* 这里渲染分类标题和库存列表 */}
    </>
  );
};

// 父组件
const Dashboard = () => {
  const categories = useSelector(viewFinalCategories);

  return (
    <SectionList
      sections={categories.map(category => ({
        title: category.label,
        data: [category] // 传递分类数据给子组件
      }))}
      renderItem={({ item }) => <CategorySection category={item} />}
      renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
    />
  );
};

该方案符合组件拆分的设计思路，代码职责更清晰，适合复杂的分类渲染逻辑。

方案3：获取全部库存后本地过滤（适合小数据量场景） #

如果库存数据量不大，可以直接获取所有库存，再在map中根据分类ID本地过滤，无需修改原有选择器。

示例代码： #

const Dashboard = () => {
  const categories = useSelector(viewFinalCategories);
  // 获取所有库存数据
  const allInventories = useSelector(state => state.inventories); // 假设库存状态存储在此

  const finalData = categories.map(category => ({
    title: category.label,
    category,
    data: allInventories.filter(inv => inv.categoryId === category.id)
  }));

  return (
    <SectionList sections={finalData} />
  );
};

该方案实现最简单，但如果库存数据量大，本地过滤会产生性能损耗，仅适用于数据量较小的场景。

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