使用Antd4.x 的表单组件-From-From.List实践

Form.List 实践（踩坑，避坑指南~~）

数据如下：

formData:{
    nodeProcessingTimelen:1111,
     remindMethods:[{status:1},{status:0}]   
}

  const [form] = Form.useForm()
  const [, update] = useReducer(x => x + 1, 0)

    
        
    
 
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }, idx) => (
              
                
                   {
                      update() //
                    }}/>
                  {/* 
                  失效：
                  1.121
                  2. 
                  3. 
                  */}
                
                
                    
                
              
            ))}
          
        )}

      

1. Form.List 的children 是一个高阶函数 默认返回 fields包含name,key…，方法：add, remove, move
2. Form.List的name 要和form数据的循环数组字段一致
3. Form.Item,name属性 一定要把fields.name 一起写上!name={[name, 'status']},否则也会失去默认值，form的双向绑定
4. 里面循环的Form.Item只能存在一个 表单组件；如果有多余节点。默认值会失效

按照上面的写法Form.List数据是可以回填回显的，form默认双向绑定

PS: 如果其他组件使用了 form的数据，例如上面的 组件 Link 的disable属性和 联动， 可以使用 Form.useWatch hooks 监听;注意这 useWatch在 4.20之后才有的hooks

在 4.20版本前 我的做法是通过 hooks -useReducer 强制更新视图