Antd Form.List支持选中Select值后更新相关联Select选项

效果如下图，

import React from 'react'
import { Form, Button, Select } from 'antd'
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
// 第一个下拉框数据
const options = [
  { value: 1, label: 'A' },
  { value: 2, label: 'B' },
  { value: 3, label: 'C' }
]

// 第二个下拉框数据
const obj = {
  A: [
    { value: 1, label: 'A1' },
    { value: 1, label: 'A2' },
    { value: 1, label: 'A3' }
  ],
  B: [
    { value: 1, label: 'B1' },
    { value: 1, label: 'B2' },
    { value: 1, label: 'B3' }
  ],
  C: [
    { value: 1, label: 'C1' },
    { value: 1, label: 'C2' },
    { value: 1, label: 'C3' }
  ]
}

const FormComponent = () => {
  const [form] = Form.useForm()
  return (
    <Form form={form}>
      <Form.Item shouldUpdate={true} noStyle={true}>
        {() => (
          <Form.List name="list">
            {(fields, { add, remove }) => {
              return (
                <div className="operation">
                  {fields.map((field, index) => (
                    <div className="input-item" key={`${field.key}${index}`}>
                      <Form.Item
                        {...field}
                        name={[field.name, 'distalEquipment']}
                        label="上联设备"
                        rules={[{ required: true }]}
                      >
                        <Select labelInValue={true} options={options} />
                      </Form.Item>
                      <Form.Item
                        {...field}
                        name={[field.name, 'distalEquipmentInterface']}
                        label="上联口"
                        rules={[{ required: true }]}
                      >
                        <Select
                          options={
                            obj?.[
                              form.getFieldValue([
                                'list',
                                field.name,
                                'distalEquipment'
                              ])?.label
                            ] || []
                          }
                        />
                      </Form.Item>
                      {field.name !== 0 && (
                        <MinusCircleOutlined
                          className="delete-btn"
                          onClick={() => remove(field.name)}
                        />
                      )}
                    </div>
                  ))}
                  <Form.Item>
                    <Button
                      type="dashed"
                      onClick={() => add()}
                      block={true}
                      icon={<PlusOutlined />}
                    />
                  </Form.Item>
                </div>
              )
            }}
          </Form.List>
        )}
      </Form.Item>
    </Form>
  )
}
export default FormComponent