reactjs React Typescript解析表单所需格式的数据

mwkjh3gx 于 2022-11-29 发布在 React

关注(0)|答案(1)|浏览(110)

我是React和Typescript的新手，我有一个可编辑的表，其中包含以下默认值，可以更新（编辑）和提交。
这是原始和预期数据格式（参数），参数字段和值与充当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|产品类型”：“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",
    },
]

我希望将上述更新后的值Map到原始数据格式，并且只将基于paramOrder替换的值和相应的值Map到给定字段（即PRODUCT_TYPE等）。
下面是代码和框链接-https://codesandbox.io/s/react-typescript-forked-qrx380?file=/src/ParameterTable.tsx
请让我知道，如果你需要任何额外的细节，谢谢帮助！！

reactjs

来源：https://stackoverflow.com/questions/74575928/react-typescript-parsing-formdata-in-required-format

1条答案

按热度按时间

mwngjboj1#

我定义了一些类型：

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
      )
    ]
  };
}

赞(0）回复(0）举报 2022-11-29

我来回答

reactjs React Typescript解析表单所需格式的数据

1条答案

相关问题

热门标签

最新问答