在react-select中出现打字稿错误

Question

我在组件中的反应选择选项参数中遇到打字稿类型错误，

错误： 输入“只读选项类型[] | undefined' 不可分配给类型 'OptionsOrGroups |不明确的'。 类型“readonly optionType[]”不可分配给类型“readonly (string | GroupBase)[]”。 类型“optionType”不可分配给类型“string |”集团基地'。 “optionType”类型中缺少属性“options”，但“GroupBase”类型中需要属性“options”

type optionType = { readonly label: string; readonly value: string };

const [options, setOptions] = useState<readonly optionType[]>();


  useEffect(() => {
    const createOption = (label: string,value: string) => ({
  label,
  value ,
});
    if(userDetails){
    const tempArray: optionType[]=[];
    const tempVariableCrew = userDetails?.startList.tables.filter((item) => {
      if (item?.tableCode === "DFDEQUI") {
        
         tempArray.push(createOption(item.itemValue, item.itemCode))
        
        return item;
      }
    });
    setOptions(tempArray);
    setDfdCrew(() => tempVariableCrew);
  }
}, [userDetails]);


------------------------------------------
return(
<>
 <CreatableSelect
        isClearable
        onChange={(newValue) => setValue(newValue as string)}
        onCreateOption={handleCreate}
        **options**={options}  **//error here**
        value={value}
        classNames={{ option: () => "hover:bg-gray-200 rounded-md" }}
      />
</>
)

我尝试调查但没有发现任何实质性内容。

Answer 1

在您的 CreatableSelect 组件上，

options

属性需要一个

OptionsOrGroups<string, GroupBase>

类型的值（如果提供），但您将自定义

optionType[]

传递给它，因此，如果您将

useState<readonly OptionType[]>

替换为

useState<OptionsOrGroups<string, GroupBase>>

，它应该可以工作正确的话，您将看到缺少哪些属性。如果您仍然想使用自定义类型作为选项，您可能需要查看

OptionOrGroups

类型的定义，看看哪些内容与您的类型不匹配。