以自定义方式显示和操纵状态值

Question

i在React中具有多个表单字段。用户输入表单字段中的值，并将其存储在组件的状态中。现在，我想以特定方式显示组件的状态。

现在，我的状态看起来像这样：

{
  "groups": [
    {
      "typeA": [
        {
          "name": "abc"
        },
        {
          "number": "13,14"
        }
      ],
      "typeB": [
        {
          "country": "xyz"
        },
        {
          "date": "2019-05-14"
        }
      ]
    }
  ]
}

但是，我想要这样的输出：

groups: {
"typeA": [[abc],[13,14]],
"typeB": [[2019-05-14],[xyz]]
}

我想知道如何操纵状态中存储的值看起来像我所需的输出。我是React的初学者，不知道如何操纵状态价值观。请任何人能帮助我

Answer 1

在这里您可以在组上使用Repal。

var state = {
  "groups": [
    {
      "typeA": [
        {
          "name": "abc"
        },
        {
          "number": "13,14"
        }
      ],
      "typeB": [
        {
          "country": "xyz"
        },
        {
          "date": "2019-05-14"
        }
      ]
    }
  ]
}
var output = state.groups //iterating over groups using reduce
.reduce((final, s)=> { // final:-output object , s:- group array element
  const values = Object.keys(s) // iterating over key element keys e.g. "typeA"
      .reduce((out, o)=> {  // out: value of key, o: element of keyArray e.g state.groups.typeA
        out[o] = s[o].map(k => Object.values(k)) //returning values in array
        return out;
        }, {})
  final =  {...final, ...values} // update the output
  return final;
}, {})
console.log(output) // "{"typeA":[["abc"],["13,14"]],"typeB":[["xyz"],["2019-05-14"]]}"