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

Question

我正在通过一组对象创建一个 tcomb-form，但我没有很多经验，老实说，我正在努力掌握它。

这是我们要使用的数组结构：

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