React-Select(MultiSelect)状态更新时如何同步删除Select Box中的选项

问题根源 #

React-Select 多选组件的可选选项列表（options）和已选中值（value）是两个独立的受控状态，仅修改options移除目标选项时，已选值状态没有同步更新，就会出现下拉列表里看不到该选项、但顶部选框仍然显示残留的问题。

修复步骤 #

• 第一步：绑定双受控状态
  确保同时维护两个状态：可选选项列表、已选中值，且两个状态都正确绑定到React-Select组件上。
  示例代码：

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

// 原始选项示例格式
const initOptions = [
  { value: 'opt1', label: '选项1' },
  { value: 'opt2', label: '选项2' },
  { value: 'opt3', label: '选项3' }
];

function MultiSelectDemo() {
  // 维护可选选项状态
  const [options, setOptions] = useState(initOptions);
  // 维护已选中值状态，绑定到Select的value属性
  const [selected, setSelected] = useState([]);

  // 选项删除逻辑
  const handleDeleteOption = (targetValue) => {
    // 1. 更新可选选项列表，移除目标选项
    const newOptions = options.filter(item => item.value !== targetValue);
    setOptions(newOptions);
    // 2. 同步更新已选中值，过滤掉被删除的选项
    const newSelected = selected.filter(item => item.value !== targetValue);
    setSelected(newSelected);
  };

  return (
    <div>
      <Select
        isMulti
        options={options}
        value={selected}
        onChange={val => setSelected(val)}
        // 其他自定义配置
      />
      {/* 触发删除的操作入口示例 */}
      <button onClick={() => handleDeleteOption('opt2')}>删除选项2</button>
    </div>
  );
}

• 第二步：匹配过滤字段
  如果你的选项唯一标识不是value字段，而是自定义的id等字段，把上述filter逻辑里的判断条件替换成对应字段即可。

注意：不要使用非受控模式（即不主动绑定value属性，依赖组件内部维护已选值），非受控模式下无法实现状态变更时的同步删除，必须切换为受控模式双状态绑定。

内容的提问来源于stack exchange，提问作者Sikandar Ali Chishty