Question

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

为此，我创建了一个功能组件，并添加了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

您需要从options数组中设置一个值作为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]);

现在可以使用。

react-select和打字稿：类型'string'不可分配给'ValueType <OptionTypeBase>'类型

2 个答案: