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

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

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

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

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

initialValue的用法：

          <Form
            name="dynamic_form_nest_item"
            onFinish={onFinish}
            form={form}
            // style={{ maxWidth: 600 }}
            style={{ width: '100%' }}
            autoComplete="off"
          >
            <Form.List name="users" initialValue={[{}]}>    
              {(fields, { add, remove }) => (
                <>
                  {fields.map(({ key, name, ...restField }) => (
                    <div
                      key={key}
                      style={{ display: 'flex', marginBottom: 8, flexWrap: 'wrap', width: '100%' }}
                    >
                      <Form.Item
                        style={{ width: '100%' }}
                        {...restField}
                        label={'证书信息'}
                        name={[name, 'name']}
                        rules={[{ required: true, message: 'Missing last name' }]}
                      >
                        <Input placeholder="证书名称" />
                      </Form.Item>
                      <Button
                        type="primary"
                        style={{ marginTop: '130px', marginLeft: '-230px' }}
                        onClick={() => remove(name)}
                        danger
                      >
                        <MinusCircleOutlined />
                        删除
                      </Button>
                    </div>
                  ))}
                  <Form.Item style={{ width: '15%', marginTop: '-40px' }}>
                    <Button
                      type="primary"
                      onClick={() => {
                        addss(fields);
                        add();
                      }}
                      block
                      icon={<PlusOutlined />}
                    >
                      新建
                    </Button>
                  </Form.Item>
                </>
              )}
            </Form.List>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                确认
              </Button>{' '}
              <Button>取消</Button>
            </Form.Item>
          </Form>

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

       
const [data,setData] = useState([{}])
<Form.List name="users" initialValue={data} />

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

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

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

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

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

        <Form
          name="dynamic_form_nest_item"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          form={form}
          // style={{ maxWidth: 600 }}
          style={{ width: '100%' }}
          autoComplete="off"
        >
          {/* <Form.List name="users">
            {(fields, { add, remove }) => ( */}
          <>
            {number.map((key, name) => (
              <div
                key={name}
                style={{ display: 'flex', marginBottom: 8, flexWrap: 'wrap', width: '100%' }}
              >
                <Form.Item
                  style={{ width: '100%' }}
                  label={'证书信息'}
                  name={[name, name + 'name']}
                  rules={[{ required: true, message: 'Missing last name' }]}
                >
                  <Input placeholder="证书名称" />
                </Form.Item>
                <Button
                  type="primary"
                  style={{ marginTop: '130px', marginLeft: '-230px' }}
                  // onClick={() => remove(name)}
                  danger
                >
                  <MinusCircleOutlined />
                  删除
                </Button>
              </div>
            ))}
            <Form.Item style={{ width: '15%', marginTop: '-40px' }}>
              <Button
                type="primary"
                onClick={() => {
                  addss();
                  // add();
                }}
                block
                icon={<PlusOutlined />}
              >
                新建
              </Button>
            </Form.Item>
          </>
          {/* )} */}
          {/* </Form.List> */}
          <Form.Item>
            <Button type="primary" htmlType="submit">
              确认
            </Button>{' '}
            <Button>取消</Button>
          </Form.Item>
        </Form>

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

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