React中如何将对象转为数组 收集全量保单列表元素

原代码无法正确收集全量保单，是由几处明确的逻辑错误导致的：

• 多余的嵌套遍历：activePoliciesMap的value本身就是各险种对应的保单数组（比如OTHER字段对应3条保单组成的数组），额外对每个险种数组调用Object.values()会遍历到数组的length、索引等非业务属性，属于无效逻辑。
• 错误的插入拦截：代码中if (activePolicyList.length === 0)的判断，会导致仅当列表为空时才插入数据，后续所有保单都会被拦截，最终只能存入1条记录。
• 多余的结构包裹：push时使用{policy}写法，会将原本的保单对象再嵌套一层，不符合扁平化保单列表的预期结构。
• 方法使用不当：map的设计用途是映射生成新数组，单纯做遍历追加操作使用forEach即可，避免无意义的性能开销。
• useEffect依赖缺失：依赖数组传空数组仅会在组件首次挂载时执行一次，后续props中的保单数据更新时，不会重新执行收集逻辑。

简洁写法（推荐） #

直接取对象所有值后通过flat拍平为一维数组，代码最简洁：

import { useEffect, useState } from 'react';

// 组件内部声明状态，不要把列表变量定义在组件外
const [activePolicyList, setActivePolicyList] = useState([]);

useEffect(() => {
  if (!props.activePolicy) return;
  // 取所有险种的保单数组，直接拍平成一维的全量保单列表
  const allPolicies = Object.values(props.activePolicy).flat();
  setActivePolicyList(allPolicies);
  console.log('全量保单列表：', allPolicies);
}, [props.activePolicy]); // 传入正确依赖，数据更新时自动重新计算

兼容写法（适配不支持flat的环境） #

通过遍历+扩展运算符合并数组，兼容性更好：

import { useEffect, useState } from 'react';

const [activePolicyList, setActivePolicyList] = useState([]);

useEffect(() => {
  if (!props.activePolicy) return;
  const allPolicies = [];
  // 遍历每个险种对应的保单数组
  Object.values(props.activePolicy).forEach(policyArr => {
    // 将当前险种的所有保单追加到总列表
    allPolicies.push(...policyArr);
  });
  setActivePolicyList(allPolicies);
  console.log('全量保单列表：', allPolicies);
}, [props.activePolicy]);

• 移除了多余的嵌套遍历逻辑，仅需一次Object.values即可拿到所有分类的保单集合。
• 删除了错误的长度判断，所有保单都会被正常收集到列表中。
• 不再额外包裹对象结构，最终列表的每一项就是原始的保单对象，可直接读取policyNumber等字段。
• 列表数据存在组件state中，避免组件外变量引发的闭包、渲染不一致问题。
• useEffect添加了正确的依赖项，传入的保单数据变化时会自动更新全量列表。

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