如何修改JS map遍历逻辑 按员工单条协议生成对应表格行

原来的写法直接遍历员工数组，每个员工只生成1行表格数据，没法适配单员工多协议的多行展示需求。

直接把外层的map换成flatMap即可实现需求：外层遍历到每个员工对象时，再遍历该员工名下的agreements协议数组，为每一条协议单独生成1行表格数据，所有行都重复填充当前员工的公共字段（比如full_name），协议相关字段逐行取当前遍历到的单条协议数据填充即可。flatMap会自动把每个员工返回的多行协议数组拍平成一维的表格行数组，不需要额外做数组扁平化处理。

修改后的代码参考：

export const formatAgreementsData = (t, agreementsData, statesList) => 
  agreementsData.flatMap((item) => 
    // 遍历当前员工的所有协议，单条协议对应1行表格
    (item.agreements || []).map((singleAgreement) => ({
      [t("tables:headers.name")]: item.full_name,
      [t("tables:headers.title")]: singleAgreement.agreement_title,
      // 其余协议相关字段从singleAgreement上取值，按原有业务逻辑补充即可
      // ...
    }))
  );

代码里加了item.agreements || []的兜底处理，遇到员工名下无协议数据的边界场景不会抛出遍历报错，无协议时不会为该员工生成任何表格行。如果需要无协议的员工也展示1行空协议行，把兜底逻辑调整下即可。

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