reactjs - Hur man implementerar React Select i TypeScript

Jag försöker implementera React Select i min applikation, det är första gången jag använder det, och jag vet inte vad som händer. När jag sätter in select i koden blir min webbsida vit. Jag har sett att det är enkelt att implementera i JavaScript, men vad jag än försöker i TypeScript fungerar det inte, och resultatet är alltid detsamma, min sida blir vit.

Här är den anpassade komponenten som jag försöker implementera baserat på React Select:

import React from 'react';
import Select from 'react-select';
import './VehiclePicker.scss';

interface Vehicle {
  id: number,
  make: string,
  model: string,
  year: number
}

interface ArrayObjectSelectState {
  selectedVehicle: Vehicle | null;
}

let state: ArrayObjectSelectState = {
  selectedVehicle: null
}

const vehicles: Vehicle[] = [
  {
    id: 1,
    make: 'Ford',
    model: 'Fiesta',
    year: 2003
  },
.
.
  {
    id: 7,
    make: 'Audi',
    model: 'A4',
    year: 2009
  }
];

export default function VehiclePicker() {
  return (
    <div className="vehicle-picker">
        <Select
          value={state.selectedVehicle}
          getOptionLabel={(vehicle: Vehicle) => vehicle.model}
          getOptionValue={(vehicle: Vehicle) => vehicle.model}
          options={vehicles}
          isClearable={true}
          backspaceRemovesValue={true}
        />
    </div>
  );
}

Svar #1

Dokumentationen för react-select har en Typescript-sektion, kanske kan du kolla den https://react-select.com/typescript#typescript-usage

Jag redigerade lite i din kod för att få den att fungera, men jag hade inte en vit skärm som du beskriver.

import React from 'react';
import Select from 'react-select';
import './VehiclePicker.scss';

interface Vehicle {
  id: number;
  make: string;
  model: string;
  year: number;
}

interface ArrayObjectSelectState {
  selectedVehicle: Vehicle | null;
}

const vehicles: Vehicle[] = [
  {
    id: 1,
    make: 'Ford',
    model: 'Fiesta',
    year: 2003,
  },
  // I hope that you did let the two dots on purpose
  // .
  // .
  {
    id: 7,
    make: 'Audi',
    model: 'A4',
    year: 2009,
  },
];

export default function VehiclePicker() {
  // I changed the position of the state here, that's how you should use the state in react
  // https://reactjs.org/docs/hooks-state.html#declaring-a-state-variable

  // If you don't need a state you can remove the following line
  const [state, setState] = React.useState<ArrayObjectSelectState>({
    selectedVehicle: null,
  });

  return (
    <div className="vehicle-picker">
      <Select
        // If you don't need a state you can remove the two following lines value & onChange
        value={state.selectedVehicle}
        onChange={(option: Vehicle | null) => {
          setState({ selectedVehicle: option });
        }}
        getOptionLabel={(vehicle: Vehicle) => vehicle.model}
        getOptionValue={(vehicle: Vehicle) => vehicle.model}
        options={vehicles}
        isClearable={true}
        backspaceRemovesValue={true}
      />
    </div>
  );
}

Relaterade artiklar