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 初始值。

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

 <Form.List
      name="funcValList"
      initialValue={[
        {
          dpList: [
            {
              dpName: null,
              identifier: null,
              value: null,
              newArr: [],
            },
          ],
          funcValue: null,
        },
      ]}
>

再往内一层的FormList 对应

<Form.List
    name={[field.name, 'dpList']}
    initialValue={[
      {
        dpName: null,
        identifier: null,
        value: null,
        newArr: [],
      },
    ]}
  >

全部代码如下

  <Form form={form} onFinish={handleFormSumbit} autoComplete="off">
        {parseType === 'object' && (
          <ProCard
            className={Styles.mb20}
            bordered
            style={{ width: '700px' }}
            title={intl.formatMessage({
              id: 'product.stepTwo.deviceFunction',
              defaultMessage: '设备功能响应',
            })}
          >
            <Form.List
              name="funcValList"
              initialValue={[
                {
                  dpList: [
                    {
                      dpName: null,
                      identifier: null,
                      value: null,
                      newArr: [],
                    },
                  ],
                  funcValue: null,
                },
              ]}
            >
              {(fields, { add, remove }) => (
                <>
                  <div className={Styles.cardCon} id="cardCon" ref={cardRef}>
                    {fields.map((field, index) => (
                      <ProCard key={field.key} style={{ marginBottom: 8 }} bordered gutter={12}>
                        {index !== 0 && (
                          <div className={Styles.removeIcon} onClick={() => remove(field.name)}>
                            <CloseOutlined style={{ fontSize: '18px' }} />
                          </div>
                        )}
                        <ProFormSelect
                          {...field}
                          label={intl.formatMessage({
                            id: 'product.stepTwo.function',
                            defaultMessage: '功能',
                          })}
                          name={[field.name, 'funcValue']}
                          colProps={{ md: 12, xl: 8 }}
                          rules={[
                            {
                              required: true,
                              message: intl.formatMessage({
                                id: 'product.stepTwo.selectFunc',
                                defaultMessage: '请选择功能',
                              }),
                            },
                          ]}
                          width="md"
                          options={intentStatusList}
                          placeholder={intl.formatMessage({
                            id: 'product.stepTwo.selectFunc',
                            defaultMessage: '请选择功能',
                          })}
                        />
                        <Form.Item noStyle shouldUpdate>
                          {() => (
                            <Form.Item
                              {...field}
                              noStyle
                              name={[field.name, 'name']}
                              fieldKey={[field.key, 'name']}
                            >
                              <Form.List
                                name={[field.name, 'dpList']}
                                initialValue={[
                                  {
                                    dpName: null,
                                    identifier: null,
                                    value: null,
                                    newArr: [],
                                  },
                                ]}
                              >
                                {(fieldsInside, { add: addInside, remove: removeInside }) => (
                                  <div>
                                    {fieldsInside.map((fieldInside, indexz) => (
                                      <div key={fieldInside.key} className={Styles.currentDpitem}>
                                        <Form.Item noStyle shouldUpdate>
                                          {() => (
                                            <ProForm.Group size={8}>
                                              <div style={{ display: 'flex', marginRight: '10px' }}>
                                                <ProFormSelect
                                                  {...fieldInside}
                                                  label={intl.formatMessage({
                                                    id: 'product.stepTwo.setFunc',
                                                    defaultMessage: '设置功能点',
                                                  })}
                                                  name={[fieldInside.name, 'identifier']}
                                                  width="sm"
                                                  rules={[
                                                    {
                                                      required: true,
                                                      message: intl.formatMessage({
                                                        id: 'product.stepTwo.selectLight',
                                                        defaultMessage: '请选择灯光模式',
                                                      }),
                                                    },
                                                  ]}
                                                  fieldProps={{
                                                    labelInValue: true,
                                                    onChange: (val) => {
                                                      changeLightMode(val, [field.name, indexz]);
                                                    },
                                                  }}
                                                  options={lightModeList}
                                                  placeholder={intl.formatMessage({
                                                    id: 'product.stepTwo.selectLight',
                                                    defaultMessage: '请选择灯光模式',
                                                  })}
                                                />
                                                <ProFormSelect
                                                  {...fieldInside}
                                                  label={intl.formatMessage({
                                                    id: 'product.stepTwo.beCome',
                                                    defaultMessage: '变成',
                                                  })}
                                                  name={[fieldInside.name, 'value']}
                                                  width="sm"
                                                  rules={[
                                                    {
                                                      required: true,
                                                      message: intl.formatMessage({
                                                        id: 'product.stepTwo.selectDazzle',
                                                        defaultMessage: '请选择炫彩模式',
                                                      }),
                                                    },
                                                  ]}
                                                  options={
                                                    (form.getFieldValue('funcValList')[field.name]
                                                      .dpList[indexz] &&
                                                      form.getFieldValue('funcValList')[field.name]
                                                        .dpList[indexz].newArr.length > 0 &&
                                                      form.getFieldValue('funcValList')[field.name]
                                                        .dpList[indexz].newArr) ||
                                                    []
                                                  }
                                                  placeholder={intl.formatMessage({
                                                    id: 'product.stepTwo.selectDazzle',
                                                    defaultMessage: '请选择炫彩模式',
                                                  })}
                                                />
                                              </div>
                                            </ProForm.Group>
                                          )}
                                        </Form.Item>
                                        <div>
                                          {fieldInside.name !== 0 && (
                                            <div
                                              className={Styles.delFunc}
                                              onClick={() => removeInside(fieldInside.name)}
                                            >
                                              <DeleteOutlined />
                                            </div>
                                          )}
                                        </div>
                                      </div>
                                    ))}
                                    {(!form.getFieldValue('funcValList')[field.name]?.dpList
                                      ?.length ||
                                      form.getFieldValue('funcValList')[field.name]?.dpList
                                        ?.length < colorfulModeList.length) && (
                                      <Form.Item>
                                        <Button
                                          icon={<PlusOutlined />}
                                          onClick={() => {
                                            addInside();
                                          }}
                                          type="primary"
                                        >
                                          {intl.formatMessage({
                                            id: 'product.stepTwo.addDp',
                                            defaultMessage: '添加DP点',
                                          })}
                                        </Button>
                                      </Form.Item>
                                    )}
                                  </div>
                                )}
                              </Form.List>
                            </Form.Item>
                          )}
                        </Form.Item>
                      </ProCard>
                    ))}
                  </div>
                  {(!form.getFieldValue('funcValList').length ||
                    form.getFieldValue('funcValList').length < intentStatusList.length) && (
                    <Form.Item>
                      <Button
                        onClick={() => {
                          add();
                          dealFlex();
                        }}
                        type="primary"
                      >
                        {intl.formatMessage({
                          id: 'product.schemeConfig.addFunc',
                          defaultMessage: '添加功能',
                        })}
                      </Button>
                    </Form.Item>
                  )}
                </>
              )}
            </Form.List>
          </ProCard>
        )}
      </Form>

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