[antd] enlace de contenido del cuadro desplegable

pregunta

Cómo vincular un dato con otro dato, como modificar un cuadro desplegable, el contenido de un cuadro desplegable también se puede cambiar juntos

lograr

Esta función se puede realizar utilizando Map

1. Escriba la opción del cuadro desplegable como el valor de Mapa
2. Los datos modificados actualmente se utilizan como datos de origen, y los demás datos que siguen al cambio son los datos de destino.
3. La clave de los datos de origen en el Mapa es la clave de sourcelos datos de destino en el Mapa es el valor de los datos de origen actuales

Entonces podemos obtener un Mapa correspondiente al contenido del cuadro desplegable

export const OPTIONS = new Map([
  [
    'source',
    [
      {
    
    
        value: 'fruit',
        label: '水果',
      },
      {
    
    
        value: 'vegetable',
        label: '蔬菜',
      },
    ],
  ],
  [
    'fruit',
    [
      {
    
    
        value: 'apple',
        label: '水果',
      },
      {
    
    
        value: 'orange',
        label: '橘子',
      },
    ],
  ],
  [
    'vegetable',
    [
      {
    
    
        value: 'cabbage',
        label: '白菜',
      },
      {
    
    
        value: 'carrot',
        label: '胡萝卜',
      },
    ],
  ],
])
	const [state, setState] = useState({
    
    
    source: '',
    target: ''
  })

  const sourceOption = OPTIONS.get('source')
  const targetOption = OPTIONS.get(state.source)
<>
<Select value={
    
    state.source}>
     {
    
    sourceOption.map((item) => (
      	<Select.Option key={
    
    item.value} value={
    
    item.value}>
           {
    
    item.label}
        </Select.Option>
          ))}
 </Select>

<Select value={
    
    state.target}>
     {
    
    targetOption.map((item) => (
      	<Select.Option key={
    
    item.value} value={
    
    item.value}>
           {
    
    item.label}
        </Select.Option>
          ))}
 </Select>
<>