React-Native-使用对象数组动态生成带有tcomb-form的表单

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

此结果将存储在Mongo中。 希望有人可以帮助我，并在此先感谢。

Answer 1

如果您提供所需的可视化表示会更好，但我认为您想渲染和更新嵌套结构。 为此，我建议使用数组的递归映射方法。

/*
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;
    })
}