以所需格式响应类型记录解析formData

Question

我是新的反应和类型记录，我有一个可编辑的表与下面的默认值，可以更新(编辑)和提交。

这是原始和预期的数据格式(参数)，参数字段和值被绑定到充当ID的paramOrder。

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": "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",
    },
]

我希望将上述更新后的值映射到原始数据格式，并仅将基于paramOrder的值和相应的值映射到给定的字段(即PRODUCT_TYPE等)。

这是代码箱链接- https://codesandbox.io/s/react-typescript-forked-qrx380?file=/src/ParameterTable.tsx

如果您需要更多的信息，请告诉我，谢谢您的帮助！

Answer 1

我定义了一些类型：

interface Param {
  paramOrder: number;
  paramInput: {
    param: { field: string; value: string }[];
  };
  paramOutput: {
    param: { field: string; value: string }[];
  };
  status: string;
}

type Params = { paramList: Param[] };

下面是代码：

const updateParams = (
  data: Record<string, string>, // formData
  params: Params // old parameters
) => Object.entries(data).reduce(updateField, params);

// this function updates one field and returns new Params object
function updateField(
  { paramList }: Params,
  [key, newValue]: [string, string]
): Params {
  const [paramOrder, fieldToUpdate] = key.split("|");
  return {
    paramList: [ // here we define new paramList
      ...paramList.map((param) =>
        // if param.paramOrder matches paramOrder of the field we
        // want to update, return new Param with updated field,
        // otherwise return old Param
        param.paramOrder === parseInt(paramOrder)
          ? {
              paramOrder: param.paramOrder,
              paramInput: {
                param: param.paramInput.param.map(({ field, value }) =>
                  field === fieldToUpdate
                    ? { field, value: newValue }
                    : { field, value }
                )
              },
              paramOutput: {
                param: param.paramOutput.param.map(({ field, value }) =>
                  field === fieldToUpdate
                    ? { field, value: newValue }
                    : { field, value }
                )
              },
              status: param.status
            }
          : param
      )
    ]
  };
}