React/Redux中如何获取Redux状态内API数据的分类键名

你的核心问题是：listType是一个JavaScript对象，而map是数组的专属方法，直接在对象上调用map自然会报错。你需要先把对象的键名（也就是你要的分类名称list_A、list_B、list_C）转换成数组，再进行遍历。

修正后的代码示例 #

const listType = useSelector((state) => state.orderReducer);
// 提取对象的所有键名，转为数组
const categoryNames = Object.keys(listType);

// 遍历数组展示分类名称
{categoryNames.map((name) => (
  <div key={name}>{name}</div>
))}

补充：同时获取分类名和对应数据 #

如果后续需要用到每个分类下的数据，可以用Object.entries()同时获取键名和对应值：

const listType = useSelector((state) => state.orderReducer);
const categoryEntries = Object.entries(listType);

{categoryEntries.map(([name, data]) => (
  <div key={name}>
    <h3>{name}</h3>
    {/* 这里可以根据data的类型处理，比如数组长度、对象内容 */}
    {Array.isArray(data) ? `包含${data.length}条数据` : '这是一个对象'}
  </div>
))}

为什么JSON.parse没用？ #

listType已经是Redux返回的JavaScript对象了，不是JSON格式的字符串。JSON.parse()的作用是把JSON字符串转成对象，对已经是对象的listType调用它不仅无效，还可能抛出错误，完全没必要用。

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