react-select，AsyncSelect 只能选择一个选项，即使我添加了 isMulti 之后它也没有显示任何选项答案

【问题标题】：react-select, AsyncSelect only able to select one option even i added isMulti after that it display no optionsreact-select，AsyncSelect 只能选择一个选项，即使我添加了 isMulti 之后它也没有显示任何选项
【发布时间】：2022-12-03 12:31:41
【问题描述】：

我可以成功选择第一个选项，但之后它显示没有选项，无法添加第二个选项，我什至添加了 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}
    />
  );
};

代码沙箱链接：https://codesandbox.io/s/dreamy-water-j2m55v?file=/src/components/SelectBox.jsx:0-1401

【问题讨论】：

标签： reactjs dropdown react-select react-select-search

【解决方案1】：

我的错

我应该以这种格式提供我的选项集合

export const options = [ { id: 1, value: "Red", colorCode: "#FF0000", label: "Red" }, ];

当我更改为这种格式时，代码有效

【讨论】：