如何在联动react-select中清除不符合关联条件的已选选项

问题背景 #

有两个react-select多选组件，对应以下动态数据集：

const options2 = [
  {value: 1, label:"apple", relationKey:1},
  {value: 2, label:"orange", relationKey:2},
  {value: 3, label:"banana", relationKey:2},
  {value: 4, label:"pineapple", relationKey:2},
];

const options1 = [
  {value: 1, label: "drink 1", relationKey:1},
  {value: 2, label: "drink 2", relationKey:2}
];

组件已实现基础联动：第一个组件的选中项决定第二个组件的可显示选项。现在需要实现：
当同时选中"drink 1"和"drink 2"、且第二个组件已选中apple, orange, banana, pineapple后，若取消选中"drink 2"，第二个组件需自动过滤已选值，仅保留符合"drink 1"关联条件的apple。要求适配动态数据集，不能用固定判断逻辑。

解决方案 #

核心思路是监听第一个组件的选中变化，动态提取允许的关联键集合，过滤第二个组件的已选值，以下是完整实现：

1. 状态与基础配置 #

用React状态维护两个组件的选中值，定义动态数据集：

import { useState } from 'react';
import Select from 'react-select';

const LinkedSelects = () => {
  // 第一个组件（饮品）的选中值
  const [selectedDrinks, setSelectedDrinks] = useState([]);
  // 第二个组件（水果）的选中值
  const [selectedFruits, setSelectedFruits] = useState([]);

  // 动态数据集
  const options2 = [
    {value: 1, label:"apple", relationKey:1},
    {value: 2, label:"orange", relationKey:2},
    {value: 3, label:"banana", relationKey:2},
    {value: 4, label:"pineapple", relationKey:2},
  ];

  const options1 = [
    {value: 1, label: "drink 1", relationKey:1},
    {value: 2, label: "drink 2", relationKey:2}
  ];

2. 处理第一个组件的选中变化 #

当饮品选中项改变时，提取允许的relationKey，并过滤已选水果：

const handleDrinkChange = (newSelectedDrinks) => {
    setSelectedDrinks(newSelectedDrinks);
    // 提取当前选中饮品的所有关联键
    const allowedKeys = newSelectedDrinks.map(item => item.relationKey);
    // 过滤已选水果，仅保留关联键在允许列表中的项
    const filteredFruits = selectedFruits.filter(fruit => allowedKeys.includes(fruit.relationKey));
    setSelectedFruits(filteredFruits);
  };

3. 动态生成第二个组件的可选项 #

根据当前选中的饮品，实时计算第二个组件的可选范围：

// 计算第二个组件的可显示选项
  const availableFruits = selectedDrinks.length === 0 
    ? [] 
    : options2.filter(fruit => selectedDrinks.some(drink => drink.relationKey === fruit.relationKey));

4. 组件渲染 #

return (
    <div style={{ padding: '2rem' }}>
      <Select
        options={options1}
        placeholder="选择饮品..."
        isSearchable={true}
        onChange={handleDrinkChange}
        isMulti
        value={selectedDrinks}
      />
      <div style={{ marginTop: '1rem' }}>
        <Select
          options={availableFruits}
          placeholder="选择水果..."
          onChange={setSelectedFruits}
          isMulti
          value={selectedFruits}
        />
      </div>
    </div>
  );
};

export default LinkedSelects;

关键逻辑说明 #

• 动态适配数据集：所有逻辑基于relationKey的匹配规则，无需硬编码具体选项值，无论数据集如何更新，只要保持关联键规则即可正常工作
• 实时过滤已选值：每次饮品选中状态变化时，自动校验已选水果的关联键，移除不符合当前可选范围的项
• 联动一致性：第二个组件的可选项和已选值始终与第一个组件的选中状态保持一致

内容的提问来源于stack exchange，提问作者LeotrimR