用 immutable.js 合并两条不匹配的数据？

Question

我有一段 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" ] 
      }
    ]

我的目标是合并两者以获得这种格式，合并替代匹配的错误：

    {
      "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 []
[]

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

Answer 1

首先，你需要了解那里的不变性的概念

let list = new List([])

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

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

不变性意味着原始数据不会更新（例如变异）。在您的示例中，这意味着原始 list 对象仍然是空的。但是.merge()returns你是一个新的List，它有合并操作的结果。

然后你会看到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 字段键入：

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

请注意，您还可以使用 mergeDeep 使其对每个匹配的键都是递归的

用 immutable.js 合并两条不匹配的数据？

Merging two pieces of mismatching data with immutable.js?

javascript

immutability

node.js

ecmascript-6

immutable.js