如何在TypeScript中输入React.useState()，使其能够获取多种类型的值。

Question

我正在尝试编写useState() hook，它可以接受数字和字符串类型作为其值。

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

我想要像这样使用上面的组件：

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

但是它给我返回了这个错误。

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

我该如何解决这个错误？

- ANTARES_SEO

Answer 1

你只需要像这样为 useState<T> 提供一个通用类型参数：

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

否则，它将从你的初始值0中推断类型，这只是一个number。以下是一个完整的示例：

TS Playground 链接

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

- jsejcksn

Answer 2

把它分解成这样：

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

另外，为什么要传递setValue，你是不是想传递值本身？(<Select selectValue = {value} />)

- Stoobish

Answer 3

你可能需要检查 <Select> 组件的 selectValue 回调函数传入的参数，它可能没有传递一个在 setValue 方法中所期望的数字。

- yugantar