reactjs - react-select och typescript: Typ 'string' kan inte tilldelas typen 'ValueType<OptionTypeBase>'

Jag försöker skapa en exempelkomponent som använder react-select med TypeScript.

För detta skapade jag en funktionell komponent och lade till standardexemplet från react-select-dokumentationen:

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}
        />
    );

};

Men detta ger mig ett fel:

 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>'.

Vad gör jag för fel?

Mina paket är:

    "@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"

Svar #1

Du behöver ställa in ett värde från din alternativ-array som det aktuella värdet på Select-komponenten.

Detta är dock inte det enda problemet eftersom typ-signaturen för onChange-funktionen är något förvirrande. Du kommer behöva definiera en typ för alternativen och använda `ValueType` i onChange-funktionssignaturen.

Här är ett fungerande exempel

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}
    />
  );
};

Mer information om problemet https://github.com/JedWatson/react-select/issues/2902

Sandbox med koden ovan https://codesandbox.io/s/angry-frost-5bh1o

Relaterade artiklar