我在当前项目中使用next.js、typescript和antd时遇到了一个问题。
虽然在antd select组件的onchage函数中指定了以下类型,但在value和onchage函数中会发生以下错误。
我一直想解决这个问题,但似乎找不到办法。
import React, { useState } from 'react';
import { Select } from 'antd';
const Home = () => {
const [postCount, setPostCount] = useState<number>(10);
const postCountOptions = [
{
value: 5,
label: 'Count 5',
},
{
value: 10,
label: 'Count 10',
},
];
const onChangeCount = useCallback((value: React.ChangeEvent<HTMLSelectElement>) => {
setPostCount(value);
}, []);
return (
<>
<Select
defaultValue={10}
onChange={onChangeCount}
options={postCountOptions}
/>
</>
);
};
export default Home;
这是发生的第一个错误。
const onChangeCount = useCallback((value: React.ChangeEvent<HTMLSelectElement>) => {
setPostCount(value); // Error 1.
}, []);
(parameter) value: React.ChangeEvent<HTMLSelectElement>
Argument of type 'ChangeEvent<HTMLSelectElement>' is not assignable to parameter of type 'SetStateAction<number>'.
Type 'ChangeEvent<HTMLSelectElement>' is not assignable to type '(prevState: number) => number'.
Type 'ChangeEvent<HTMLSelectElement>' provides no match for the signature '(prevState: number): number'.ts(2345)
这是发生的第二个错误。
<Select
defaultValue={10}
onChange={onChangeCount} // Error 2.
options={postCountOptions}
/>
(JSX attribute) onChange?: ((value: unknown, option: BaseOptionType | DefaultOptionType | (BaseOptionType | DefaultOptionType)[]) => void) | undefined
Type '(value: React.ChangeEvent<HTMLSelectElement>) => void' is not assignable to type '(value: unknown, option: BaseOptionType | DefaultOptionType | (BaseOptionType | DefaultOptionType)[]) => void'.
Types of parameters 'value' and 'value' are incompatible.
Type 'unknown' is not assignable to type 'ChangeEvent<HTMLSelectElement>'.ts(2322)
Select.d.ts(99, 5): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & SelectProps<unknown, BaseOptionType | DefaultOptionType> & { children?: ReactNode; } & { ...; } & { ...; }'
2条答案
按热度按时间cgh8pdjw1#
我想你在onChangeCount函数上得到了错误的类型。使用
number
而不是React.ChangeEvent<HTMLSelectElement>
所以,代码看起来像这样
t98cgbkg2#
你可以通过Select组件传递类型。你也不需要用useState显式定义类型
number
(除非你有不同的要求)。一旦你将初始值传递给useState,typescript将通过检查初始状态值自动推断正确的类型。