React中多个Select组件如何过滤其他组件已选中的选项

两个初始方案的核心问题都是状态结构设计不符合需求：

• 单值存储selected的方案只能记录一个选中项，Select数量超过2个时，无法覆盖所有选中值，自然会出现第三个Select过滤失效的问题
• 无索引绑定的列表存储方案，没有记录每个选中值归属哪个Select，修改选中值时无法精准移除对应位置的旧值，会导致已取消选择的旧值残留在过滤列表里，被错误排除。

用和Select数量等长的数组维护每个选择器的选中状态，数组索引和Select的渲染索引一一对应，即可解决所有问题，核心逻辑：

• 初始化状态数组，每个位置初始值为null，代表对应Select暂未选择值
• 任意Select选中值变更时，只更新数组对应索引位置的值，直接覆盖旧值，不会产生残留
• 渲染单个Select的选项时，先收集所有其他Select的已选值做过滤，同时保留当前Select自身的选中值，避免当前选中项从自身选项中消失
• 给Select组件绑定value属性关联对应状态，避免Popover重渲染导致选值显示异常

修正后的完整代码：

const App = () => {
  const names = ["jack", "lucy", "leo", "patrick", "joe", "rio"]; // 接口返回的姓名列表
  const dummyData = ["Select One", "Select Two", "Select Three", "Select Four"]; // 接口返回的选择器配置列表
  // 初始化选中状态数组，长度与选择器数量一致
  const [selectedMap, setSelectedMap] = React.useState(
    Array(dummyData.length).fill(null)
  );

  // 更新对应索引位置的选中值，直接覆盖旧值
  const handleChange = (selectIndex, value) => {
    setSelectedMap(prev => {
      const next = [...prev];
      next[selectIndex] = value;
      return next;
    });
  };

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      {dummyData.map((_, index) => {
        // 收集其他选择器已经选中的值
        const excludedNames = selectedMap.filter((val, i) => i !== index && val !== null);
        return (
          <div style={{ marginTop: 20 }} key={index}>
            <Popover
              trigger="click"
              content={
                <Select
                  placeholder="Select"
                  value={selectedMap[index]}
                  onChange={(val) => handleChange(index, val)}
                  style={{ width: 120 }}
                >
                  {names
                    .filter(name => !excludedNames.includes(name))
                    .map(name => <Option value={name} key={name}>{name}</Option>)
                  }
                </Select>
              }
            >
              Click {index}
            </Popover>
          </div>
        )
      })}
    </div>
  );
};

• 任意Select选中的值，会自动从其他所有Select的下拉选项中隐藏
• 修改某Select的选中值时，之前选中的旧值会自动回到公共可选池，重新出现在其他Select的选项中
• 不受Select数量限制，不管渲染多少个选择器，互斥过滤逻辑都能正常生效

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