antd pro後臺管理項目中form表單的動態添加問題

在做的一個基於antd pro開發的一個後臺管理系統中遇到這樣一個需求,員工檔案部分的地址信息,緊急聯繫人,教育經歷需要編輯添加多段,因此遇到了antd中的form表單裏面添加多個字段的問題,具體需求以及實現如下:

經過查閱官方文檔,可以通過Form.List,以及內部提供的API來實現
下面附上源碼

     <Form
        {...layout}
        form={form}
        name={props.titleid}
        onFinish={onFinish}
        initialValues={contectInfo}
      >
        <Row>
          <Col span={8}>
            {
             Object.keys(contectTitle).slice(0,3).map(item=>{
              if(contectTitle[item]==="姓名" || contectTitle[item]==="關係"){
                return (
                  <Form.Item name={item} 
                  label={contectTitle[item]} 
                  rules={[{ required:true, message: '請輸入' }]}
                  key={`${item+Math.random()}`} hasFeedback>
                  <Input placeholder="請輸入" />
                </Form.Item>
                )
              }
                return(
                  <Form.Item
                  name={item}
                  label={contectTitle[item]}
                  key={`${item+Math.random()}`}
                  rules={[{  message: '請輸入' }]}
                >
                  <Input placeholder="請輸入" />
                </Form.Item>
                )
             })  
            }
          </Col>
          <Col span={8}>
          {
             Object.keys(contectTitle).slice(3,6).map(item=>{
              if(contectTitle[item]==="是否重要" ){
                return (
                  <Form.Item name={item} 
                  label={contectTitle[item]} 
                  rules={[{ required:true, message: '請輸入' }]}
                  key={`${item+Math.random()}`} hasFeedback>
                    <Radio.Group>
                      <Radio value="a">是</Radio>
                      <Radio value="b">否</Radio>
                    </Radio.Group>
                </Form.Item>
                )
              }
                return(
                  <Form.Item
                  name={item}
                  label={contectTitle[item]}
                  key={`${item+Math.random()}`}
                  rules={[{  message: '請輸入' }]}
                >
                  <Input placeholder="請輸入" />
                </Form.Item>
                )
             })  
            }
          </Col>
          <Col span={8}>
 
            {
             Object.keys(contectTitle).slice(6).map(item=>{
                return(
                  <Form.Item
                  name={item}
                  key={`${item+Math.random()}`}
                  label={contectTitle[item]}
                  rules={[{  message: '請輸入' }]}
                >
                  <Input placeholder="請輸入" />
                </Form.Item>
                )
             })  
            }
          </Col>
        </Row>
        <Row>
            <Col span={24}>
            <Divider dashed />

            </Col>
        </Row>
        //以下爲動態添加的表單的代碼,
   <Form.List name="names" >
    {(fields, { add, remove }) => {
      console.log("fields",fields)
      return (
        <div>
          {fields.map((field, index) => (
            <div key={field.key}>
              <Row>
                  <Col span={8}>
                    {
                      Object.keys(contectTitle).slice(0,3).map(item=>{
                      if(contectTitle[item]==="姓名" || contectTitle[item]==="關係"){
                        console.log(8888,field.name)
                        return (
                          <Form.Item 
                          name={[field.name, item]} //必須每個都添加上
                          label={contectTitle[item]} 
                          fieldKey={[field.fieldKey, "lastName"]}                         
                          rules={[{ required:true, message: '請輸入' }]}
                            key={`${item+Math.random()}`}//必須每個都添加上hasFeedback>
                          <Input placeholder="請輸入" />
                        </Form.Item>
                        )
                      }
                        return(
                          <Form.Item
                          name={[field.name, item]}
                          label={contectTitle[item]}
                          fieldKey={[field.fieldKey, "lastName"]}
                          key={`${item+Math.random()}`}
                          rules={[{  message: '請輸入' }]}
                        >
                          <Input placeholder="請輸入" />
                        </Form.Item>
                        )
                      })  
                    }
                  </Col>
                  <Col span={8}>
                  {
                      Object.keys(contectTitle).slice(3,6).map(item=>{
                      if(contectTitle[item]==="是否重要" ){
                        return (
                          <Form.Item name={[field.name, item]}
                          label={contectTitle[item]} 
                          rules={[{ required:true, message: '請輸入' }]}
                          key={`${item+Math.random()}`}
                          fieldKey={[field.fieldKey, "lastName"]}
                           hasFeedback>
                            <Radio.Group>
                              <Radio value="a">是</Radio>
                              <Radio value="b">否</Radio>
                            </Radio.Group>
                        </Form.Item>
                        )
                      }
                        return(
                          <Form.Item
                          name={[field.name, item]}
                          label={contectTitle[item]}
                          key={`${item+Math.random()}`}
                          fieldKey={[field.fieldKey, "lastName"]}
                          rules={[{  message: '請輸入' }]}
                        >
                          <Input placeholder="請輸入" />
                        </Form.Item>
                        )
                      })  
                    }
                  </Col>
                  <Col span={8}>

                    {
                      Object.keys(contectTitle).slice(6).map(item=>{
                        return(
                          <Form.Item
                          name={[field.name, item]}
                          label={contectTitle[item]}
                          key={`${item+Math.random()}`}
                          fieldKey={[field.fieldKey, "lastName"]}
                          rules={[{  message: '請輸入' }]}
                        >
                          <Input placeholder="請輸入" />
                        </Form.Item>
                        )
                      })  
                    }
                  </Col>
                </Row>
                <Row>
                    <Col span={24}>
                    <Divider dashed />
                    <Form.Item>
                      {fields.length > 0 ? (
                      <MinusCircleOutlined
                        className="dynamic-delete-button"
                        style={{ margin: '0 8px' }}
                        onClick={() => {
                          remove(field.name);
                        }}
                      />
                    ) : null}
                    </Form.Item>  
                    </Col>
                </Row>
                </div>

          ))}
          <Form.Item>
            <Button 
            type="link" 
            onClick={() => {
              add();
            }}
            >
                +添加
              </Button>
          </Form.Item>
        </div>
      );
    }}
  </Form.List>