act-select и typcript: тип 'string' нельзя назначить типу 'ValueType <OptionTypeBase>' - PullRequest
Новая
       2

act-select и typcript: тип 'string' нельзя назначить типу 'ValueType <OptionTypeBase>'

0 голосов
/ 11 февраля 2020

Я пытаюсь создать пример компонента, который используетact-select с машинописью.

Для этого я создал функциональный компонент и добавил пример по умолчанию из response-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"

Ответы [ 2 ]

2 голосов
/ 11 февраля 2020

Вам необходимо установить значение из массива параметров в качестве текущего значения компонента Select.

Это, однако, не единственная проблема, поскольку сигнатура типа функции onChange несколько сбивает с толку. Вам нужно определить тип для опций и использовать `ValueType 'в сигнатуре функции onChange.

Вот рабочий пример 

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

0 голосов
/ 11 февраля 2020 
  <Select
    value={selectedOption}
    onChange={(option) => handleChange(option)}
    options={options}
  />

Проблема value должна быть записана в options. Вы установили состояние для строки "chocolate", и оно выдает ошибку, указывающую, что это не тот же тип.

Если вы обновите свое состояние до чего-то вроде: 

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

Теперь это будет работать.

...