9.Ant Design Pro Form.List多层嵌套

一、问题的描述

根据业务需求，多层嵌套。

二、正常的预期是什么？

三、问题的解决方案

初始化的数据结构：

newFuncValist = [
    {
      dpList: [
        {
          dpName: null,
          identifier: null,
          value: null,
          newArr: [],
        },
      ],
      funcValue: null,
    }
]

多层次嵌套表单，拿到后台返回的数据之后，需要setFieldsValue。

 form?.setFieldsValue({funcValList: newFuncValist || []});

然后分别给Form.List配置initialValue 初始值。

根据数据结构，就对应层次结构，最外层的

再往内一层的FormList 对应

全部代码如下

  

        {parseType === 'object' && (
          
            
              {(fields, { add, remove }) => (
                <>
                  

                    {fields.map((field, index) => (
                      
                        {index !== 0 && (
                          
 remove(field.name)}>
                            
                          
                        )}
                        
                        
                          {() => (
                            
                              
                                {(fieldsInside, { add: addInside, remove: removeInside }) => (
                                  

                                    {fieldsInside.map((fieldInside, indexz) => (
                                      

                                        
                                          {() => (
                                            
                                              

                                                 {
                                                      changeLightMode(val, [field.name, indexz]);
                                                    },
                                                  }}
                                                  options={lightModeList}
                                                  placeholder={intl.formatMessage({
                                                    id: 'product.stepTwo.selectLight',
                                                    defaultMessage: '请选择灯光模式',
                                                  })}
                                                />
                                                 0 &&
                                                      form.getFieldValue('funcValList')[field.name]
                                                        .dpList[indexz].newArr) ||
                                                    []
                                                  }
                                                  placeholder={intl.formatMessage({
                                                    id: 'product.stepTwo.selectDazzle',
                                                    defaultMessage: '请选择炫彩模式',
                                                  })}
                                                />
                                              
                                            
                                          )}
                                        
                                        

                                          {fieldInside.name !== 0 && (
                                            
 removeInside(fieldInside.name)}
                                            >
                                              
                                            
                                          )}
                                        
                                      
                                    ))}
                                    {(!form.getFieldValue('funcValList')[field.name]?.dpList
                                      ?.length ||
                                      form.getFieldValue('funcValList')[field.name]?.dpList
                                        ?.length < colorfulModeList.length) && (
                                      
                                        }
                                          onClick={() => {
                                            addInside();
                                          }}
                                          type="primary"
                                        >
                                          {intl.formatMessage({
                                            id: 'product.stepTwo.addDp',
                                            defaultMessage: '添加DP点',
                                          })}
                                        
                                      
                                    )}
                                  
                                )}
                              
                            
                          )}
                        
                      
                    ))}
                  
                  {(!form.getFieldValue('funcValList').length ||
                    form.getFieldValue('funcValList').length < intentStatusList.length) && (
                    
                       {
                          add();
                          dealFlex();
                        }}
                        type="primary"
                      >
                        {intl.formatMessage({
                          id: 'product.schemeConfig.addFunc',
                          defaultMessage: '添加功能',
                        })}
                      
                    
                  )}
                
              )}
            
          
        )}
      

OK，收工！如果可以实现记得点赞分享，谢谢老铁～