react antdesign中的Form.list的默认值问题解决方法

主要讲添加和编辑用同一个Form.list表单，来回切换并且改变此表单的默认展示几项

相信大家用过antdesign中的Form.list时候都会遇到一个问题吧，就是怎么默认值显示一项？

然后再网上也搜了很多方法，结果还是没有达到自己想要的效果。

在这里有一个坑，大家肯定都踩过，我们再Form.list中的属性发现一个initialValue(默认值)  

initialValue的用法：

          

                
              {(fields, { add, remove }) => (
                <>
                  {fields.map(({ key, name, ...restField }) => (
                    

                      
                        
                      
                       remove(name)}
                        danger
                      >
                        
                        删除
                      
                    
                  ))}
                  
                     {
                        addss(fields);
                        add();
                      }}
                      block
                      icon={}
                    >
                      新建
                    
                  
                
              )}
            
            
              
                确认
              {' '}
              取消
            
          

配合Form.list使用，他的格式是一个数组包多个对象，有几个对象就默认展示几项，非常方便，但是呢这个属性他有一个弊端，当我们，已经给initialValue赋值一次之后可以再次赋值，但是这个initialValue默认值就无法再改变了，除非刷新，希望大家明白默认值的意思。

       
const [data,setData] = useState([{}])


setData([{},{}])   //不行

let array = data
setData([...array])  //也不行   

总之各种方法都不行，就在我屋头闷水的时候想到了一个方案，不知道大家有没有注意到表单中的fields表单展示几项都和他息息相关，竟然都是围绕这他来进行增加和删除的，那么我们可以把他换成我们自己创建的一个变量啊，然后对这个变量进行操作！

  const [number, setNumber] = useState([{}]);

此时我们就不用Form.list了，用map循环。

        

          {/* 
            {(fields, { add, remove }) => ( */}
          <>
            {number.map((key, name) => (
              

                
                  
                
                 remove(name)}
                  danger
                >
                  
                  删除
                
              
            ))}
            
               {
                  addss();
                  // add();
                }}
                block
                icon={}
              >
                新建
              
            
          
          {/* )} */}
          {/*  */}
          
            
              确认
            {' '}
            取消
          
        

 如果想要新增一项只需要给number加上一个空对象就行了，删除，同理删除一个对象

下期讲如何回显数据，这和name={[name, name + 'name']}息息相关