Javascript 将两个不匹配的数据与immutable.js合并？

我有一段JSON数据，用于动态生成表单，如下所示：

{
  "form": {
    "fields": [
      {
        "name": "First Name",
        "alt": "first_name"
      },
      {
        "name": "Last Name",
        "alt": "last_name"
      },
      {
        "name": "D.O.B.",
        "alt": "dob"
      },
      {
        "name": "Primary Address",
        "alt": "primary_address"
      },
      {
        "name": "Primary City",
        "alt": "primary_city"
      },
      {
        "name": "ZIP Code",
        "alt": "zip"
      },
      {
        "name": "Country",
        "alt": "country"
      },
      {
        "name": "First 4 Phone Digits",
        "alt": "first_phone"
      },
      {
        "name": "Phone Number",
        "alt": "phone_number"
      }
    ]
  },
  "someVal": [],
  "someVal2": "a string"
}

当我提交此表格时，如果有错误，我将收到以下格式的错误：

    [
      { 
        "alt": "primary_city",
        "errors": [ "primary_city Error Message" ] 
      },
      { 
        "alt": "zip",
        "errors": [ "zip Error Message" ] 
      },
      { 
        "alt": "first_name",
        "errors": [ "first_name Error Message" ] 
      },
      { 
        "alt": "dob",
        "errors": [ "dob Error Message" ] 
      },
      { 
        "alt": "primary_address",
        "errors": [ "primary_address Error Message" ] 
      },
      { 
        "alt": "last_name",
        "errors": [ "last_name Error Message" ] 
      }
    ]

我的目标是将两者合并以获得此格式，合并alts匹配的错误：

    {
      "form": {
        "fields": [
          {
            "name": "First Name",
            "alt": "first_name",
            "errors": [ "first_name Error Message" ]
          },
          {
            "name": "Last Name",
            "alt": "last_name",
            "errors": [ "last_name Error Message" ]
          },
          {
            "name": "D.O.B.",
            "alt": "dob",
            "errors": [ "dob Error Message" ]
          },
          {
            "name": "Primary Address",
            "alt": "primary_address",
            "errors": [ "primary_address Error Message" ]
          },
          {
            "name": "Primary City",
            "alt": "primary_city",
            "errors": [ "primary_city Error Message" ]
          },
          {
            "name": "ZIP Code",
            "alt": "zip",
            "errors": [ "zip Error Message" ]
          },
          {
            "name": "Country",
            "alt": "country"
          },
          {
            "name": "First 4 Phone Digits",
            "alt": "first_phone"
          },
          {
            "name": "Phone Number",
            "alt": "phone_number"
          }
        ]
      },
      "someVal": [],
      "someVal2": "a string"
    }

到目前为止，我一直在努力做到以下几点：

import { fromJS, Map, List } from 'immutable';

import form from './json/form.json'
import config from './json/errors.json'

let list = new List([])

list.merge(fromJS(config), fromJS(form));

console.log(list);

console.log(list.toJS())
// console.log(JSON.stringify(newList, null, 2))

我只得到以下输出：

List []
[]

---

老实说，我不知道如何开始合并它们，文档也没有多大帮助。

首先，您需要理解其中的不变性概念

let list = new List([])

const mergedList = list.merge(fromJS(config), fromJS(form));

console.log(list); // prints empty list

不变性意味着原始数据不被更新，例如变异。在您的示例中，这意味着原始列表对象仍然为空。但是.merge返回一个新列表，该列表具有合并操作的结果

然后您将看到Immutable中的列表按索引合并。看看这个小例子

const a = new List([{a: 1}, {a: 2}]);
const b = new List([{b: 3}, {b: 4}]);

const merged = a.merge(b);

console.log(merged.toJS())
// [{a: 1, b: 3}, {a: 2, b: 4}]

如果不想按索引合并，而是按特定标识符合并，则应将记录转移到地图中，并按alt字段键入：

---

请注意，您还需要使用mergeDeep使其对每个匹配的键进行递归

嗯，您正在尝试将对象（第一组代码）与数组（第二组代码）合并。看起来您实际上想要将第一组代码中form.fields属性的值与第二组代码中的数组合并……您还需要告诉代码您想要在alt属性中匹配的代码。我建议阅读的答案了解更多信息。@MikeMcCaughan我试过list.mergefromJSerrors，fromJSform.form.fields；但我仍然得到一个空数组。刚刚看到你的第二条评论，正在查看。@MikeMcCaughan-hmm，它所做的似乎只是将两个数组组合起来，而不是将它们合并在一起。我不知道该怎么办。

 import form from './json/form.json'
 import config from './json/errors.json'

 const formByField = form.reduce(
   (total, field) => ({...total, [field.alt]: field}),
   {}
 );
 const configByField = config.reduce(
   (total, field) => ({...total, [field.alt]: field}),
   {}
 );

 // then you can merge two Maps together

 const result = new Map().mergeDeep(fromJS(formByField), fromJS(configByField));