react-select多选下拉框预填充后无法删除及新增选项问题

我做了一个更新用户信息的模态框，里面包含一个支持多选俱乐部的组件。打开模态框时，希望下拉框能预填充用户已选的俱乐部（数据库中以字符串数组存储），避免用户重复选择。当前代码能显示预填充值，但存在两个问题：

• 预填充的选项点击×无法删除
• 从下拉框选择新选项时，新值不会被添加进去

当前实现代码 #

import Select, { ActionMeta, MultiValue } from "react-select";
import classNames from "classnames";
import { selectStyling } from "../../utilities/SelectStyling";

export interface Option {
  value: string;
  label: string;
}

interface Props {
  paddingTop?: string;
  paddingBottom?: string;
  title: string;
  options: Option[];
  placeholder: string;
  changeHandler: (newValue: Option[], actionMeta: ActionMeta<Option>) => void;
  initialValues?: string[];
}

const FormMultiSelectDropdown = ({paddingTop, paddingBottom, title, options, placeholder, changeHandler, initialValues}: Props) => {

  const handleChange = (newValue: Option[] | MultiValue<Option>, actionMeta: ActionMeta<Option>) => {
    changeHandler(newValue as Option[], actionMeta);
  }

  const values: Option[] = [];

  if(initialValues) {
    initialValues.forEach((value) => {
      values.push({value: value.toLowerCase(), label: value})
    }); 
  }

  return(
    <div className={classNames('flex', 'flex-col', 'px-10', paddingTop, paddingBottom, 'font-bold')} >
      <label className="text-lg font-bold mb-2 text-orange-400">{title}</label>
      <Select
        value={values}
        onChange={handleChange}
        placeholder = {placeholder}
        options={options}
        styles={selectStyling}
        isMulti
      />
    </div>
  );
}

export default FormMultiSelectDropdown;

问题原因 #

react-select的多选组件是通过对象引用匹配来识别选项的。你当前的实现是用initialValues生成了全新的Option对象，这些新对象和props.options数组里的原选项对象内存引用不同，组件无法识别它们是同一个选项，因此删除、添加操作都无法触发正确的状态更新。

解决方案 #

不要手动创建新的Option对象，而是直接从传入的props.options数组中筛选匹配对应的值，这样拿到的选项和原数组中的对象引用一致，组件就能正常识别并处理操作。

修改后的完整代码 #

import Select, { ActionMeta, MultiValue } from "react-select";
import classNames from "classnames";
import { selectStyling } from "../../utilities/SelectStyling";

export interface Option {
  value: string;
  label: string;
}

interface Props {
  paddingTop?: string;
  paddingBottom?: string;
  title: string;
  options: Option[];
  placeholder: string;
  changeHandler: (newValue: Option[], actionMeta: ActionMeta<Option>) => void;
  initialValues?: string[];
}

const FormMultiSelectDropdown = ({paddingTop, paddingBottom, title, options, placeholder, changeHandler, initialValues}: Props) => {

  const handleChange = (newValue: Option[] | MultiValue<Option>, actionMeta: ActionMeta<Option>) => {
    changeHandler(newValue as Option[], actionMeta);
  }

  // 从传入的options中匹配筛选initialValues对应的选项，保证引用一致
  const values = initialValues 
    ? options.filter(option => initialValues.includes(option.value)) 
    : [];

  return(
    <div className={classNames('flex', 'flex-col', 'px-10', paddingTop, paddingBottom, 'font-bold')} >
      <label className="text-lg font-bold mb-2 text-orange-400">{title}</label>
      <Select
        value={values}
        onChange={handleChange}
        placeholder = {placeholder}
        options={options}
        styles={selectStyling}
        isMulti
      />
    </div>
  );
}

export default FormMultiSelectDropdown;

补充说明 #

• 如果你的initialValues存储的是选项的label文本而非value，只需把筛选条件改成initialValues.includes(option.label)
• 确保initialValues中的字符串和options对应字段的大小写、格式完全一致，否则会出现匹配不到的情况

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