反应-选择正确的onchange值类型

Question

我有一个像这样的基本选择组件。

import { Controller } from "react-hook-form";
import Select, { StylesConfig } from "react-select";
//..
const [universe, setUniverse] = useState<SetStateAction<TOption | unknown>>(null);
<Controller
name="universe_id"
control={control} // this control is imported from react-hook-form nothing special
rules={{ required: true }}
render={({ field }) => (
<Select
{...field}
value={universe}
onChange={handleUniverseChange}
options={universeOptions}
styles={selectStyles as StylesConfig}
/>
)}
/>

和TOption型

export type TOption = {
label: string | number;
value: string | number;
};

问题是我不能为更改处理程序值设置正确的类型

const handleUniverseChange = (item: unknown ) => {
setUniverse(item);
setValue("universe_id", item.value); // object type is unknown
};

尝试使用TOption类型的项目也不工作。

const handleUniverseChange = (item: TOption) => {

本行出现错误

<Select
{...field}
value={universe}
onChange={handleUniverseChange}

错误:Type "(item: TOption) =>void"不能分配"(newValue:未知，actionMeta: actionMeta) =>void" .

Answer 1

修复了类型断言和附加变量。

const handleUniverseChange = (item: TOption | unknown) => {
setUniverse(item as TOption);
const val = item as TOption;
setValue("universe_id", val.value as string);
};

Answer 2

选项应该在数组中而不是在对象中。请尝试下面的代码，

export type TOption = [{
label: string | number;
value: string | number;
}];

Answer 3

我认为这里的问题在于useState通用-未知的"主导";TOption。如果SetStateAction<...>，将unknown更改为null:

const [universe, setUniverse] = useState<SetStateAction<TOption | null>>(null);

如果SetStateAction<...>不是有意设置的:

const [universe, setUniverse] = useState<TOption | null>(null);

，然后尝试

const handleUniverseChange = (item: TOption) => {
...
}

编辑

类型是从传递的选项中推断出来的，所以要确保传递的选项是所需的类型(f.ex)。TOption[])

export type TOption = {
label: string | number;
value: string | number;
};
const universes: TOption[] = [
{ label: "test", value: 0 },
{ label: "test2", value: 1 },
];
const App = () => {
const handleChange = (item: TOption | null) => {
if (!item) return;
console.log(item); // {label: ..., value: ...}
};
return <Select onChange={handleChange} options={universes} />;
};

Answer 4

此处不需要SetStateAction。

将处理程序更改为

const handleUniverseChange = (item: TOption | null )  => {}

话虽如此，TOption还是觉得很不对。你说标签和值可以是字符串|数字，这让你的工作变得很困难。

type TOption = {
label: string | number;
value: string | number;
};

另外，我建议您在这里分配一个默认值而不是null

const [universe, setUniverse] = useState<TOption | null>(null);

到处浮动空值从来不是个好主意。