反应选择和打字稿：类型“字符串”不可分配给类型“ValueType”<OptionTypeBase> &#39;

Question

我正在尝试创建一个使用 react-select 和 typescript 的示例组件。

为此，我创建了一个功能组件并添加了react-select docs中的默认示例：

const options = [
    {value: 'chocolate', label: 'Chocolate'},
    {value: 'strawberry', label: 'Strawberry'},
    {value: 'vanilla', label: 'Vanilla'},
];

const MyComponent = () => {

    const [selectedOption, setSelectedOption] = useState('chocolate');

    const handleChange = (option: string) => {
        setSelectedOption(option);
    };

    return (
        <Select
            value={selectedOption}
            onChange={(option) => handleChange(option)}
            options={options}
        />
    );

};

但是，这给了我一个错误：

 Overload 1 of 2, '(props: Readonly<Pick<Props<OptionTypeBase>, string | number> & Props<OptionTypeBase> & Props<OptionTypeBase>>): StateManager<...>', gave the following error.
    Type 'string' is not assignable to type 'ValueType<OptionTypeBase>'.
  Overload 2 of 2, '(props: Pick<Props<OptionTypeBase>, string | number> & Props<OptionTypeBase> & Props<OptionTypeBase>, context?: any): StateManager<...>', gave the following error.
    Type 'string' is not assignable to type 'ValueType<OptionTypeBase>'.

我究竟做错了什么？

我的包裹是：

    "@types/react": "^16.9.19",
    "@types/react-dom": "^16.9.5",
    "@types/react-select": "^3.0.10",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-select": "^3.0.8",
    "typescript": "^3.7.5"

Answer 1

您需要将选项数组中的一个值设置为 Select 组件的当前值。

然而，这不是唯一的问题，因为 onChange 函数的类型签名有些混乱。 您需要为选项定义一个类型并在 onChange 函数签名中使用“ValueType”。

这是一个工作示例

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

const options: OptionType[] = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

const MyComponent = () => {
  const [selectedOption, setSelectedOption] = useState<ValueType<OptionType>>(options[0]);

  const handleChange = (option: ValueType<OptionType>) => {
    setSelectedOption(option);
  };

  return (
    <Select
      value={selectedOption}
      onChange={option => handleChange(option)}
      options={options}
    />
  );
};

有关该问题的更多信息https://github.com/JedWatson/react-select/issues/2902

上面代码的沙箱https://codesandbox.io/s/angry-frost-5bh1o

Answer 2

  <Select
    value={selectedOption}
    onChange={(option) => handleChange(option)}
    options={options}
  />

问题是value必须是options中的一个条目。 您已将状态设置为字符串“chocolate”，它会抛出一个错误，表明它不是同一类型。

如果您将状态更新为：

  const [selectedOption, setSelectedOption] = useState(options[0]);

它现在可以工作了。

Answer 3

import AsyncSelect from 'react-select/async';  

interface ColourOption {
    readonly value: string;
    readonly label: string;
    readonly color: string;
    readonly isFixed?: boolean;
    readonly isDisabled?: boolean;
  }
  
  const colourOptions: readonly ColourOption[] = [
    { value: 'ocean', label: 'Ocean', color: '#00B8D9', isFixed: true },
    { value: 'blue', label: 'Blue', color: '#0052CC', isDisabled: true },
    { value: 'purple', label: 'Purple', color: '#5243AA' },
    { value: 'red', label: 'Red', color: '#FF5630', isFixed: true },
    { value: 'orange', label: 'Orange', color: '#FF8B00' }
  ];
  

  const filterColors = (inputValue: string) => {
    return colourOptions.filter((i) =>
      i.label.toLowerCase().includes(inputValue.toLowerCase())
    );
  };
  
  const promiseOptions = (inputValue: string) =>
    new Promise<ColourOption[]>((resolve) => {
      setTimeout(() => {
        resolve(filterColors(inputValue));
      }, 1000);
    });    


<AsyncSelect 
    isMulti
    cacheOptions
    defaultOptions
    placeholder ={"Start typing to add another conditions"}
    loadOptions={promiseOptions}
    />

Answer 4

尝试做这样的事情：

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

const options: TSelectOption[] = [
    {value: 'chocolate', label: 'Chocolate'},
    {value: 'strawberry', label: 'Strawberry'},
    {value: 'vanilla', label: 'Vanilla'},
];

const MyComponent = () => {

const [selectedOption, setSelectedOption] = useState<Pick<TSelectOption, 'value'>>('chocolate');

const handleChange = (option: SingleValue<Pick<TSelectOption, 'value'>>) => {
    setSelectedOption(option);
};

   return (
       <Select
           value={selectedOption}
           onChange={(option) => handleChange(option)}
           options={options}
      />
   );

};