react-select, AsyncSelect只能选择一个选项，即使我添加了isMulti之后它也不显示任何选项.&

Question

我可以成功选择第一个选项，但之后它不显示任何选项，不能添加第二个选项，我甚至添加了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

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

Answer 1

我的错

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

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

当我更改为这种格式时，代码可以工作