javascript - 以自定义方式显示和操作状态值

Question

我有一个 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

在这里您可以对组使用reduce。

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