React-Native - Динамическая генерация формы с tcomb-формой с использованием массива объектов

Question

Я создаю tcomb-форму с помощью массива объектов, но у меня нет большого опыта работы с ней, и, честно говоря, я изо всех сил пытаюсь освоиться с ней.

Это структура массива, которую мы будем использовать:

export const AUDIT_CONTENT = 
  [
    {type: "label", style: "title", group: "4.1", text: "field text here"}, 
    {type: "label", style: "label", group: "4.1", text: "field text here"},
    {type: "multi-checkbox", style: "checkbox", group: "4.1", text: "field text here"},
    {type: "multi-checkbox", style: "checkbox", group: "4.1", text: "field text here"},
    {type: "multi-checkbox", style: "checkbox", group: "4.1", text: "field text here"},
    {type: "label", style: "label", group: "4.1", text: "field text here"},
    {type: "multi-checkbox", style: "checkbox", group: "4.1", text: "field text here"}
  ]

Поля с type: label объекты, которые собираются хранить поля type: multi-checkboxи эти поля являются теми, которые будут проверены. Я группирую эти поля по группам, поэтому все поля с группой 4.1 находятся внутри массива, а также поля с группой 4.1 и так далее.

Мне удалось динамически сгенерировать эти поля, выполнив следующие действия:

myFields = () => {
  for (var c = 0; c < groupedFields.length; c++) {
    for (var i = 0; i < groupedFields[c].length; i++ ) {
      if (groupedFields[c][i].type === 'multi-checkbox') {
        fields[groupedFields[c][i].text] = t.maybe(t.enums({
                OPTION_1 : "OPTION 1 Label",
                OPTION_2 : "OPTION 2 Label",
                OPTION_3 : "OPTION 3 Label",
                OPTION_4 : "OPTION 4 Label"
        }));
      }
    }
  }
}
var fields = {};
myFields()
var myFormType = t.struct(fields);

Теперь моя проблема начинается здесь. Я только генерирую поля, которые получают значение, в этом случае те, с type: multi-checkboxно я также хочу динамически отображать в моей форме поля с type: label в том же порядке, что и мой AUDIT_CONTENT массив с этими объектами, поэтому результат будет примерно таким:

    "Field with style title": {
      "Field with style label": [
         {"Field with style multi-checkbox": "OPTION_1"},
         {"Field with style multi-checkbox": "OPTION_3"},
      ],
      "Other field with style label": [
         {"Field with style multi-checkbox": "OPTION_4"},
         {"Field with style multi-checkbox": "OPTION_2"},
      ]
    }

Этот результат будет сохранен в Монго. Надеюсь, что кто-то может помочь мне с этим и спасибо заранее.

Answer 1

Было бы лучше, если бы вы предоставили визуальное представление того, что вы хотите, но я думаю, что вы хотите визуализировать и обновить вложенную структуру. Для этого я рекомендую рекурсивные методы map для массива.

/*
To render a structure like this you can use map and assign types to the objects to decide what to render 
But you should render it all.
Maybe you can use something like this:
*/
renderInputs(array){
    return array.map((obj) => {
        /* You can generate even nested forms if you want */
        if (obj.children) {
            return <div> {this.renderInputs()}</div>
        } else {
            return renderType(obj)
        }
    })
}

renderType(obj){
    switch (obj.type) {
        case 'label':
            return <Element  {...objProps} />
        case 'multi-checkbox':
            return <Element2 {...objProps} />
        /*You even can generate other methods for nested objects*/
        case 'other-case':
            return <div>{this.OtherSpecialSubRenderMethodIfYoUwANT()}</div>
    }
}

/**You will need an recursive method to update your state also and each object is recomended to have an unique id*/
updateState(array = this.state.array, newValue, id){
    return array.map((obj) => {
        if (obj.children) {
            return updateState(obj.children, newValue, id)
        }
        if (obj.id == id) {
            return { ...obj, value: newValue }
        }
        return obj;
    })
}