react-select AsyncSelect开启isMulti后无法多选，选首项后无选项展示

问题描述 #

使用react-select的AsyncSelect组件，已添加isMulti属性，但成功选择第一个选项后，下拉菜单不再显示任何选项，无法添加第二个选项。

原代码 #

import React from "react";
import AsyncSelect from "react-select/async";
import makeAnimated from "react-select/animated";
import { options } from "../colorOptions";
import chroma from "chroma-js";

const animatedComponents = makeAnimated();

export const SelectBox = () => {
  const loadOptions = (searchValue, callback) => {
    console.log(searchValue);

    setTimeout(() => {
      const filteredOptions = options.filter((option) =>
        option.name.toLowerCase().includes(searchValue.toLowerCase())
      );

      console.log(filteredOptions);

      callback(filteredOptions);
    }, 1000);
  };

  const colorStyles = {
    control: (styles) => ({ ...styles, backgroundColor: "white" }),
    option: (styles, { data, isDesable, isFocused, isSelected }) => {
      return { ...styles, color: data.colorCode };
    },
    multiValue: (styles, { data }) => {
      const color = chroma(data.colorCode);
      return {
        ...styles,
        backgroundColor: color.alpha(0.1).css(),
        color: data.colorCode
      };
    },
    multiValueLabel: (styles, { data }) => ({
      ...styles,
      color: data.colorCode
    })
  };

  return (
    <AsyncSelect
      key={options.length}
      loadOptions={loadOptions}
      option={options}
      closeMenuOnSelect={false}
      components={animatedComponents}
      isMulti
      defaultOptions
      styles={colorStyles}
    />
  );
};

问题分析与修复方案 #

1. 修复props名称错误 #

AsyncSelect组件的选项属性是options（复数），原代码写成了option（单数），导致组件无法正确识别初始选项，这是核心问题之一。

2. 修复样式中的拼写错误 #

样式里的isDesable应为isDisabled，拼写错误会导致选项状态判断异常，影响正常显示。

3. 移除不合理的key属性 #

key={options.length}会让组件无法根据选中状态更新——因为options长度未变，key值固定，React不会触发组件重新渲染，直接移除该属性即可。

4. 可选：排除已选中选项（避免重复选择） #

在loadOptions中加入已选中选项的过滤逻辑，确保下拉菜单只显示未选中的选项，提升交互体验。

修复后的代码 #

import React, { useState } from "react";
import AsyncSelect from "react-select/async";
import makeAnimated from "react-select/animated";
import { options } from "../colorOptions";
import chroma from "chroma-js";

const animatedComponents = makeAnimated();

export const SelectBox = () => {
  const [selectedOptions, setSelectedOptions] = useState([]);

  const loadOptions = (searchValue, callback) => {
    setTimeout(() => {
      // 过滤已选中的选项，避免重复显示
      const availableOptions = options.filter(
        option => !selectedOptions.some(selected => selected.value === option.value)
      );
      // 根据搜索关键词过滤
      const filteredOptions = availableOptions.filter((option) =>
        option.name.toLowerCase().includes(searchValue.toLowerCase())
      );
      callback(filteredOptions);
    }, 1000);
  };

  const colorStyles = {
    control: (styles) => ({ ...styles, backgroundColor: "white" }),
    option: (styles, { data, isDisabled, isFocused, isSelected }) => {
      return { ...styles, color: data.colorCode };
    },
    multiValue: (styles, { data }) => {
      const color = chroma(data.colorCode);
      return {
        ...styles,
        backgroundColor: color.alpha(0.1).css(),
        color: data.colorCode
      };
    },
    multiValueLabel: (styles, { data }) => ({
      ...styles,
      color: data.colorCode
    })
  };

  return (
    <AsyncSelect
      loadOptions={loadOptions}
      options={options}
      closeMenuOnSelect={false}
      components={animatedComponents}
      isMulti
      defaultOptions
      styles={colorStyles}
      value={selectedOptions}
      onChange={setSelectedOptions}
    />
  );
};

说明 #

修复后，组件可正常实现多选功能，每次选择后下拉菜单会显示剩余未选中的选项，同时支持根据搜索关键词过滤内容。

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