WordPress Gutenberg中动态循环调用useSelect获取多分类数据报错求助

问题描述 #

在Gutenberg开发场景中，需要动态获取多个自定义分类的记录。单个分类的获取逻辑正常：

const test = useSelect(
  (select) => wp.data.select('core').getEntityRecords('taxonomy', 'grammar1', { per_page: 100 }),
  []
);
console.log("test", test);

但当分类名称和数量动态生成（如terms = ["grammar1", "grammar2", "grammar3"]），尝试通过循环调用useSelect批量获取时：

const test2 = [];
terms.forEach((item) => {
  test2[item] = useSelect(
    (select) => wp.data.select('core').getEntityRecords('taxonomy', item, { per_page: 100 }),
    []
  );
});

触发Redux错误：Switching useSelect from mapping to mapping is not allowed

问题原因 #

useSelect作为基于React useCallback的自定义钩子，必须严格遵守React钩子规则：钩子只能在组件的顶层作用域调用，不能在循环、条件判断或嵌套函数内执行。上述循环调用useSelect的写法违反了这一规则，导致Redux状态管理出现错误。

可行解决方案 #

将批量获取逻辑整合到单个useSelect调用中，通过遍历分类数组一次性获取所有数据：

// 假设terms为动态获取的分类数组
const terms = ["grammar1", "grammar2", "grammar3"];

const taxonomyRecords = useSelect((select) => {
  const coreSelect = select('core');
  // 用reduce生成以分类名为键的记录对象
  return terms.reduce((records, taxonomy) => {
    records[taxonomy] = coreSelect.getEntityRecords('taxonomy', taxonomy, { per_page: 100 });
    return records;
  }, {});
}, [terms]); // 将terms作为依赖项，分类变化时重新获取数据

console.log("taxonomyRecords", taxonomyRecords);

说明 #

• 该写法符合React钩子规则，在组件顶层调用useSelect，内部通过reduce批量处理多个分类的请求。
• 依赖数组[terms]确保当分类列表动态变化时，useSelect会重新执行并更新数据。
• 返回的taxonomyRecords是一个对象，键为分类名，值为对应分类的记录数组，可直接通过taxonomyRecords.grammar1访问对应数据。

如果分类数量极大，前端批量请求可能存在性能问题，此时后端自定义接口一次性返回所有数据的备选方案依然可取，但上述前端方案已能满足常规场景的需求。

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