Ant-design 的自动完成组件中,ValueType 和 OptionType 两个属性在使用时会出现类型错误的问题。这是因为 OptionType props 需要一个数组类型的参数,但是默认情况下只是一个对象数组类型,所以需要手动将其转换为数组类型。
可以在代码中添加如下代码进行转换,解决该
interface OptionProps {
value: string,
label: string,
key?: string,
}
interface SearchProps {
}
const Search: React.FC = () => {
const [options, setOptions] = useState([])
const handleSearch = (value: string) => {
// 可以调用API发送请求获取options的数据
setOptions([{ label: value, value }])
}
const handleChange = (value: string, option: OptionProps) => {
console.log(value, option)
}
return (
options={options}
onSearch={handleSearch}
onChange={handleChange}
>
)
}
上述代码中,将 options 属性的类型定义为 OptionProps[] 类型,同时在 handleSearch 方法中将数据转换成 OptionProps[] 数组类型后再设置给 options。并在 handleChange 方法中将参数 option 的类型也定义为 OptionProps, 避免自动完成组件抛出类型错误的异常。