用immutability-helper更新自定义表单控件中数据

开发中会遇到Form表单项由多个基础组件组合而成，且组件间有互动，如果想继续使用Form表单的validateFields校验错误并获取表单所有数据，就需要自定义表单控件。

本次开发时表单控件中包含 Radio 和 Table/List，List中包含Input输入组件，开发的组件中是从父级获取 value 和 onChange 方法去展示和更新表单数据，如果数据中包含，array对象，直接在原数据上修改数据，就会导致数据被实时更新，那么在不保存此修改时就是问题，所以不能增删改都不能在原数据上操作。

如果要修改深层次的原数据，就要对数据进行copy再修改，还是比较麻烦的，好在在Antd官网中发现了 immutability-helper 包。可以在在不更改原始源的情况下改变数据副本。

包含API:

• $push —— 数组;
• $unshift —— 数组;
• $splice —— 数组;
• $set —— 替换/覆盖/合并原数据;
• $toggle —— array of strings ，toggles a list of boolean fields from the target object；
• $unset —— remove the list of keys in array from the target object;
• $merge —— 合并对象;
• $apply —— passes in the current value to the function and updates it with the new returned value；
• $add —— 新增;
• $remove —— 删除。

本次使用了 $set$splice $push API

举例： 在末尾插入数据

import update from "immutability-helper";
update(arr, {
    $push: [4,5,6]
})

在删除数组某项，删除数组某项再插入一项

import update from "immutability-helper";
update(arr, {$splice: [[i, 1]]})
update(arr, {$splice: [[i, 1], [j, 'x']]})

设置数组中某项的对象值

import update from "immutability-helper";
update(arr, {[i]: {value: {$set: newValue}}})

非常推荐这个库的使用，更多高级用法可以在官网中学习immutability-helper github