时间戳

首页 > 解决方案 > 打字稿：创建具有嵌套级别，键和值作为变量的对象

arrays - 打字稿：创建具有嵌套级别，键和值作为变量的对象

问题描述

我的反应表单的每个字段组件都有一个对象数组，我想用我的表单值编译成一个对象。

interface FormProps {
  name: string;
  subName?: string;
  value: undefined | string | number | boolean;
}

interface DatasProps {
  user: ProfileProps;
  friend: undefined | ProfileProps;
  phone: undefined | number;
  car: boolean;
}

interface ProfileProps {
  firstname: string;
  age: undefined | number;
  gender: 'male' | 'female';
}

const getDatas = (form: FormProps[]) => {
  const datas = {};

  // for (const elem of form) {
  // }

  return datas as DatasProps;
};

const form: FormProps[] = [
  {
    name: 'user',
    subName: 'firstname',
    value: 'Marc',
  },
  {
    name: 'user',
    subName: 'age',
    value: 32,
  },
  {
    name: 'user',
    subName: 'gender',
    value: 'male',
  },
  {
    name: 'friend',
    subName: 'firstname',
    value: 'Frank',
  },
  {
    name: 'friend',
    subName: 'gender',
    value: 'male',
  },
  {
    name: 'car',
    value: false,
  },
];

console.log(getDatas(form));

这里的预期结果，对于getDatas(form)：

{
  user: {
    firstname: 'Marc',
    age: 32,
    gender: 'male'
  },
  friend: {
    firstname: 'Frank',
    gender: 'male'
  },
  phone: undefined,
  car: false
}

我需要自动化这个，因为DatasProps和FormProps（ProfileProps取决于FormProps）可以改变。

我希望能够应用于getDatas任何具有一级嵌套的表单，如我们在中所见FormProps：

标签： arraysreactjstypescriptobjectnested

解决方案

你需要像这样减少你的数组：

const getDatas = (form: FormProps[]): DatasProps=> {
  const datas = form.reduce((acc, field) => {
       if (!field.subName) {
           datas[field.name] = field.value
           continue;
       }

      if (!acc[field.name]) {
        acc[field.name] = {}
      }

      acc[field.name][field.subName] = field.value
      return acc
  }, {})
  
  return datas as DatasProps
};

或使用 for 循环：

const getDatas = (form: FormProps[]): DatasProps=> {
    const datas = {};
    for (const field of form) {
      if (!field.subName) {
        datas[field.name] = field.value
        continue;
      }

      if (!datas[field.name]) {
        datas[field.name] = {}
      }

      datas[field.name][field.subName] = field.value
    }
  
    return datas as DatasProps
};

推荐阅读