reactjs - Hvordan skrive React.useState() som kan ha flere typer som verdi med Typescript

Jeg prøver å skrive useState()-hooken som kan ha tall- og strengtype som verdi.

export interface Select {
  selectValue: React.Dispatch<React.SetStateAction<number | string>>;
  ...
}

Og jeg prøver å bruke komponenten ovenfor slik:

const [value, setValue] = React.useState(0);
<Select selectValue = {setValue} />

Men det gir meg denne feilen.

Type 'Dispatch<SetStateAction<number>>' is not assignable to type 'Dispatch<SetStateAction<string | number>>'.
  Type 'SetStateAction<string | number>' is not assignable to type 'SetStateAction<number>'.
    Type 'string' is not assignable to type 'SetStateAction<number>'.

Hvordan kan jeg løse denne feilen?

Svar #1

Du trenger bare å gi et generisk typeargument til useState<T> slik:

const [value, setValue] = useState<string | number>(0);

Ellers vil det utlede typen fra din opprinnelige verdi 0, som bare er number. Her er et komplett eksempel:

TS-lekeplasslenke

import {
  default as React,
  Dispatch,
  ReactElement,
  SetStateAction,
  useState,
} from 'react';

interface SelectProps {
  selectValue: string | number;
  setSelectValue: Dispatch<SetStateAction<string | number>>;
}

declare function Select (props: SelectProps): ReactElement;

function Example (): ReactElement {
  const [value, setValue] = useState<string | number>(0);
  return <Select selectValue={value} setSelectValue={setValue} />;
}

Svar #2

Bryt det ned slik:

export interface Select {
  selectValue: React.Dispatch<React.SetStateAction<number>> | React.Dispatch<React.SetStateAction<string>>;
  ...
}

Også, hvorfor sender du setValue, mente du å sende selve verdien? (<Select selectValue={value} />)

Relaterte artikler