react-select 打字稿问题 - 通用类型“ValueType”需要 2 个类型参数。ts(2314)

Question

我正在尝试使用react-select并拥有以下代码：

import React, {useState} from 'react';
import LanguageChange from '../../../Icons/LanguageChange';
import Select, { ValueType } from 'react-select';

type OptionType = {
    value: string;
    label: string;
  };


export const LanguageSelector = () => {
    const languageOptions: OptionType[] = [
        { value: 'English', label: 'EN' },
        { value: 'German', label: 'DE' },
        { value: 'French', label: 'FR' },
      ];
    const [selectedOption, setSelectedOption] = useState<ValueType<OptionType>>(languageOptions[0]);
    const handleChange = (option: ValueType<OptionType>) => {
    setSelectedOption(option);
  };

    return (
        <LanguageChange>
            <Select
                value={selectedOption}
                onChange={setSelectedOption}
                options={languageOptions}
            />
        </LanguageChange>
    )
}

但我不断收到以下错误：（别名） type ValueType<OptionType extends OptionTypeBase, IsMulti extends boolean> = IsMulti extends true ？选项类型：选项类型 | null 导入 ValueType 通用类型“ValueType”需要 2 个类型参数。ts(2314)

知道我在这里缺少什么吗？

Answer 1

ValueType需要两个泛型：OptionType您提供的那个和IsMulti哪个是trueor false。 IsMulti确定它是否是一个数组。如果你有一个OptionTypewith {value: string}，ValueType如果它是一个多选应该是，string[]而对于单个选择它应该是string。

在您的情况下，您只有一个选择，因此您可以使用ValueType<OptionType, false>. 但是您也可以直接使用，string因为您已经知道选项的值类型是string这样，因此无需向后工作。

源代码