React TypeScript中按指定格式解析FormData并映射原数据结构

我是React和TypeScript新手，现有一个可编辑表格，其默认值可修改并提交。原数据格式如下（paramOrder作为ID关联字段与值）：

const parameters = {
  paramList: [
    {
      paramOrder: 0,
      paramInput: {
        param: [
          {
            field: "PRODUCT_TYPE",
            value: '"BT"'
          },
        ]
      },
      paramOutput: {
        param: [
          {
            field: "INCREMENTAL_EXPENSES",
            value: "0.0028"
          },
        ]
      },
      status: "Draft"
    },
    {
      paramOrder: 1,
      paramInput: {
        param: [
          {
            field: "PRODUCT_TYPE",
            value: '"BT"'
          },
        ]
      },
      paramOutput: {
        param: [
          {
            field: "INCREMENTAL_EXPENSES",
            value: "0.0028"
          },
        ]
      },
      status: "Draft"
    },
  ]
};

我通过表单控件处理字段变更，将字段名组合为类似"0|PRODUCT_TYPE":"ABC"的形式后拆分得到如下数组：

const setParam = (formData, parameters) => {
  const objArray = Object.keys(formData).map(key => {
    const [paramOrder, field] = key.split('|');
    return {
      paramOrder,
      field,
      value: formData[key],
    };
  });
  return objArray;
};

当前得到的数据格式如下，但paramOrder存在重复，需合并并映射回原数据格式，仅替换对应paramOrder和field的value值：

[
    {
        "paramOrder": "0",
        "field": "PRODUCT_TYPE",
        "value": "ABC"
    },
    {
        "paramOrder": "0",
        "field": "INCREMENTAL_EXPENSES",
        "value": "12"
    },
    {
        "paramOrder": "1",
        "field": "PRODUCT_TYPE",
        "value": "BT"
    },
    {
        "paramOrder": "1",
        "field": "INCREMENTAL_EXPENSES",
        "value": "0.5"
    }
]

解决方案 #

可以通过以下步骤实现数据映射：

1. 按paramOrder分组中间数据：先把拆分后的数组转换为以paramOrder为键的对象，方便快速查找对应参数。
2. 遍历原数据列表更新值：对原paramList中的每一项，找到对应分组的修改数据，分别更新paramInput和paramOutput里的value。

示例代码如下：

const updateParameters = (formData, originalParams) => {
  // 1. 把拆分后的数组按paramOrder分组（转换为数字匹配原数据类型）
  const groupedUpdates = setParam(formData, originalParams).reduce((acc, item) => {
    const numOrder = parseInt(item.paramOrder, 10);
    if (!acc[numOrder]) {
      acc[numOrder] = [];
    }
    acc[numOrder].push(item);
    return acc;
  }, {} as Record<number, { field: string; value: string }[]>);

  // 2. 遍历原paramList，更新对应字段的value
  return {
    ...originalParams,
    paramList: originalParams.paramList.map(paramItem => {
      const updates = groupedUpdates[paramItem.paramOrder] || [];
      
      // 更新paramInput中的参数
      const updatedInputParams = paramItem.paramInput.param.map(inputParam => {
        const matchUpdate = updates.find(u => u.field === inputParam.field);
        return matchUpdate ? { ...inputParam, value: matchUpdate.value } : inputParam;
      });

      // 更新paramOutput中的参数
      const updatedOutputParams = paramItem.paramOutput.param.map(outputParam => {
        const matchUpdate = updates.find(u => u.field === outputParam.field);
        return matchUpdate ? { ...outputParam, value: matchUpdate.value } : outputParam;
      });

      return {
        ...paramItem,
        paramInput: { ...paramItem.paramInput, param: updatedInputParams },
        paramOutput: { ...paramItem.paramOutput, param: updatedOutputParams }
      };
    })
  };
};

代码说明 #

• 分组处理：用reduce将拆分后的数组按数字类型的paramOrder分组，避免重复遍历查找。
• 不可变更新：使用扩展运算符(...)创建新对象，保持原数据不变，符合React状态更新的不可变原则。
• 精准匹配：通过field字段匹配修改项，仅更新有改动的value，未修改的字段保留原数据。

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